Hướng dẫn not css - không css

Thử nó

Lớp giả ____99 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 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ụ,

  
  
  
  Thành phần div
  Thành phần p
  
  Thành phần ul li
  Thành phần ul li
  
  
  

  3 khớ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ụ,

  
  
  
  Thành phần div
  Thành phần p
  
  Thành phần ul li
  Thành phần ul li
  
  
  

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

  
  
  
  Thành phần div
  Thành phần p
  
  Thành phần ul li
  Thành phần ul li
  
  
  

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

  
  
  
  Thành phần div
  Thành phần p
  
  Thành phần ul li
  Thành phần ul li
  
  
  

  6.
• Tính đặc hiệu của lớp giả ____99 đượ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

  
  
  
  Thành phần div
  Thành phần p
  
  Thành phần ul li
  Thành phần ul li
  
  
  

  8.

• 
  
  
  Thành phần div
  Thành phần p
  
  Thành phần ul li
  Thành phần ul li
  
  
  

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

  :not(p){
      background: blue;
  }

  0, bao gồm

  :not(p){
      background: blue;
  }

  1 và

  :not(p){
      background: blue;
  }

  2.
• 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,

  :not(p){
      background: blue;
  }

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

  :not(p){
      background: blue;
  }

  4, vì

  :not(p){
      background: blue;
  }

  5,

  :not(p){
      background: blue;
  }

  6,

  :not(p){
      background: blue;
  }

  7,

  :not(p){
      background: blue;
  }

  8,

  :not(p){
      background: blue;
  }

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

  $('("tag:not(selector)")')

  0 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ụ:

  $('("tag:not(selector)")')

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

  $('("tag:not(selector)")')

  2.
• 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

  $('("tag:not(selector)")')

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

  $('("tag:not(selector)")')

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

  $('("tag:not(selector)")')

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

  :not(p){
      background: blue;
  }

  0.

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