Hướng dẫn css not parent class - css không phải lớp cha

Thử nó

Class Pseudo-Class có một số kỳ quặc, thủ thuật và kết quả bất ngờ mà bạn nên biết trước khi sử dụng nó.

Cú pháp

Class pseudo-class :not() yêu cầu một danh sách được phân tách bằng dấu phẩy của một hoặc nhiều bộ chọn làm đối số của nó. Danh sách không được chứa một bộ chọn phủ định khác hoặc một phần tử giả.

:not(  )

Sự mô tả

Có một số hiệu ứng và kết quả bất thường khi sử dụng :not() mà bạn nên ghi nhớ khi sử dụng nó:

• Các bộ chọn vô dụng có thể được viết bằng cách sử dụng lớp giả này. Ví dụ,

  .row .p {
    border: 3px solid blue;
  }
  
  .disable .row .p {
    border: 3px solid red;;
  }
  

  1 phù hợp với bất kỳ yếu tố nào không phải là một yếu tố, rõ ràng là vô nghĩa, vì vậy quy tắc đi kèm sẽ không bao giờ được áp dụng.
• Lớp giả này có thể làm tăng tính đặc hiệu của một quy tắc. Ví dụ,

  .row .p {
    border: 3px solid blue;
  }
  
  .disable .row .p {
    border: 3px solid red;;
  }
  

  2 sẽ khớp với cùng một yếu tố với

  .row .p {
    border: 3px solid blue;
  }
  
  .disable .row .p {
    border: 3px solid red;;
  }
  

  3 đơn giản hơn, nhưng có độ đặc hiệu cao hơn của hai bộ chọn

  .row .p {
    border: 3px solid blue;
  }
  
  .disable .row .p {
    border: 3px solid red;;
  }
  

  4.
• Tính đặc hiệu của lớp giả :not() được thay thế bằng tính đặc hiệu của bộ chọn cụ thể nhất trong đối số phân tách dấu phẩy của các bộ chọn; Cung cấp tính đặc hiệu tương tự như thể nó đã được viết

  .row .p {
    border: 3px solid blue;
  }
  
  .disable .row .p {
    border: 3px solid red;;
  }
  

  6.

• .row .p {
    border: 3px solid blue;
  }
  
  .disable .row .p {
    border: 3px solid red;;
  }
  

  7 sẽ phù hợp với bất cứ điều gì không phải là

  .row .p {
    border: 3px solid blue;
  }
  
  .disable .row .p {
    border: 3px solid red;;
  }
  

  8, bao gồm

  .row .p {
    border: 3px solid blue;
  }
  
  .disable .row .p {
    border: 3px solid red;;
  }
  

  9 và

  /* If any ascendant has a given class, no border */
  .disable {
    --parent-disable-border: none;
  }
  
  /* Default border with fallback value of a CSS Variable / Custom Property */
  .p {
    border: var(--parent-disable-border, 3px solid blue);
  }
  

  0.
• Bộ chọn này sẽ phù hợp với mọi thứ "không phải là X". Điều này có thể đáng ngạc nhiên khi được sử dụng với các bộ kết hợp hậu duệ, vì có nhiều đường dẫn để chọn một phần tử đích. Chẳng hạn,

  /* If any ascendant has a given class, no border */
  .disable {
    --parent-disable-border: none;
  }
  
  /* Default border with fallback value of a CSS Variable / Custom Property */
  .p {
    border: var(--parent-disable-border, 3px solid blue);
  }
  

  1 vẫn sẽ áp dụng cho các liên kết bên trong

  /* If any ascendant has a given class, no border */
  .disable {
    --parent-disable-border: none;
  }
  
  /* Default border with fallback value of a CSS Variable / Custom Property */
  .p {
    border: var(--parent-disable-border, 3px solid blue);
  }
  

  2, vì

  /* If any ascendant has a given class, no border */
  .disable {
    --parent-disable-border: none;
  }
  
  /* Default border with fallback value of a CSS Variable / Custom Property */
  .p {
    border: var(--parent-disable-border, 3px solid blue);
  }
  

  3,

  /* If any ascendant has a given class, no border */
  .disable {
    --parent-disable-border: none;
  }
  
  /* Default border with fallback value of a CSS Variable / Custom Property */
  .p {
    border: var(--parent-disable-border, 3px solid blue);
  }
  

  4,

  /* If any ascendant has a given class, no border */
  .disable {
    --parent-disable-border: none;
  }
  
  /* Default border with fallback value of a CSS Variable / Custom Property */
  .p {
    border: var(--parent-disable-border, 3px solid blue);
  }
  

  5,

  /* If any ascendant has a given class, no border */
  .disable {
    --parent-disable-border: none;
  }
  
  /* Default border with fallback value of a CSS Variable / Custom Property */
  .p {
    border: var(--parent-disable-border, 3px solid blue);
  }
  

  6,

  /* If any ascendant has a given class, no border */
  .disable {
    --parent-disable-border: none;
  }
  
  /* Default border with fallback value of a CSS Variable / Custom Property */
  .p {
    border: var(--parent-disable-border, 3px solid blue);
  }
  

  7, v.v. đều có thể khớp với phần

  /* If any ascendant has a given class, no border */
  .disable {
    --parent-disable-border: none;
  }
  
  /* Default border with fallback value of a CSS Variable / Custom Property */
  .p {
    border: var(--parent-disable-border, 3px solid blue);
  }
  

  8 của bộ chọn.
• Bạn có thể phủ định một số bộ chọn cùng một lúc. Ví dụ:

  /* If any ascendant has a given class, no border */
  .disable {
    --parent-disable-border: none;
  }
  
  /* Default border with fallback value of a CSS Variable / Custom Property */
  .p {
    border: var(--parent-disable-border, 3px solid blue);
  }
  

  9 tương đương với

  :not(  )
  

  0.
• Nếu bất kỳ bộ chọn nào được truyền cho lớp giả :not() không hợp lệ hoặc không được trình duyệt hỗ trợ, toàn bộ quy tắc sẽ bị vô hiệu. Cách hiệu quả để khắc phục hành vi này là sử dụng

  :not(  )
  

  2 Pseudo-Class, chấp nhận danh sách chọn tha thứ. Ví dụ:

  :not(  )
  

  3 sẽ vô hiệu hóa toàn bộ quy tắc, nhưng

  :not(  )
  

  4 sẽ khớp với bất kỳ yếu tố nào không phải là

  .row .p {
    border: 3px solid blue;
  }
  
  .disable .row .p {
    border: 3px solid red;;
  }
  

  8.

Ví dụ

Bộ cơ bản của: không () ví dụ

HTML

<p>I am a paragraph.p>
<p class="fancy">I am so very fancy!p>
<div>I am NOT a paragraph.div>
<h2>
  <span class="foo">foo inside h2span>
  <span class="bar">bar inside h2span>
h2>

CSS

.fancy {
  text-shadow: 2px 2px 3px gold;
}

/* 
 elements that don't have a class `.fancy` */
p:not(.fancy) {
  color: green;
}

/* Elements that are not 
 elements */
body :not(p) {
  text-decoration: underline;
}

/* Elements that are not 
 and not  elements */
body :not(div):not(span) {
  font-weight: bold;
}

/* Elements that are not 
s or `.fancy` */
body :not(div, .fancy) {
  text-decoration: overline underline;
}

/* Elements inside an 
 that aren't a  with a class of `.foo` */
h2 :not(span.foo) {
  color: red;
}

Kết quả

Xem thêm