Trong CSS, chúng ta thường cần ký vào bài đăng mà chúng ta muốn chọn một phần tử, nhưng không phải trong các trường hợp cụ thể - chẳng hạn như nếu phần tử đó có một lớp nhất định. Trong những trường hợp này, chúng ta có thể sử dụng bộ chọn :not[]
để làm điều đó. Hãy xem nó hoạt động như thế nào
CSS không phải bộ chọn
Bộ chọn CSS :not[]
được hầu hết các trình duyệt hỗ trợ rộng rãi. Cách nó hoạt động là chúng ta tạo một bộ chọn, sau đó chỉ định nó không nên là gì. Ví dụ: giả sử bạn có HTML sau
Not Red
Not Red
Red
Red
Chúng tôi có một loạt các div
ở đây và một số không nên có màu đỏ. Nếu chúng ta muốn tất cả các div
nói chung trên trang của chúng ta có màu đỏ, ngoại trừ các phần tử
div:not[.not-red] {
color: red;
}
1, thì chúng ta có thể sử dụng div:not[.not-red] {
color: red;
}
2 để đảm bảo chúng vẫn không có màu đỏdiv:not[.not-red] {
color: red;
}
Đây là một ví dụ khác. Theo mặc định, tất cả các thành phần sẽ có phông chữ Arial - ngoại trừ các thành phần
div:not[.not-red] {
color: red;
}
3Old Fashioned Text
Some Text
CSS của chúng tôi, nơi chỉ các phần tử không phải là
div:not[.not-red] {
color: red;
}
3 sử dụng phông chữ Arial, trông như thế nàydiv:not[.old-fashioned] {
font-family: Arial, sans-serif;
}
CSS không phải bộ chọn Tăng tính đặc hiệu
Bạn có thể đã quen với khái niệm về tính đặc hiệu trong CSS, trong đó một số bộ chọn nhất định “ghi đè” những bộ chọn khác. Ví dụ: một
div:not[.not-red] {
color: red;
}
5 có độ đặc hiệu thấp hơn một div:not[.not-red] {
color: red;
}
6, do đó, mọi thuộc tính CSS của div:not[.not-red] {
color: red;
}
6 sẽ ghi đè lên các thuộc tính của div:not[.not-red] {
color: red;
}
5 trên cùng một phần tửBộ chọn
div:not[.not-red] {
color: red;
}
9 cũng ảnh hưởng đến tính đặc hiệu. Ví dụ: nếu bạn có Old Fashioned Text
Some Text
0 trong mã của mình, nó vẫn được tính là có div:not[.not-red] {
color: red;
}
6, vì vậy độ đặc hiệu sẽ tăng lên nếu nó có một div:not[.not-red] {
color: red;
}
6. Điều này rất hữu ích để ghi nhớ khi sử dụng :not[]
CSS không phải Bộ chọn và cấu trúc DOM
Một điều khó hiểu về :not[]
, là khi bạn cố gắng sử dụng nó để ngăn các kiểu áp dụng cho những thứ bên trong phần tử. Ví dụ: giả sử bạn có HTML sau
Giả sử bạn chỉ muốn áp dụng một kiểu cho các phần tử
Old Fashioned Text
Some Text
5 không nằm trong các phần tử Old Fashioned Text
Some Text
6. Đơn giản, phải không? div :not[form] input {
border: 2px solid red;
}
Chỉ điều này sẽ không hoạt động và lý do tại sao :not[]
đó được áp dụng ở mọi cấp độ - và chúng tôi gói gọn từng đầu vào trong
Old Fashioned Text
Some Text
8. Điều đó có nghĩa là Old Fashioned Text
Some Text
9 được áp dụng cho Old Fashioned Text
Some Text
8, và nó thực sự không phải là một hình thức. Vì vậy, cả hai phần tử Old Fashioned Text
Some Text
5 sẽ có viền màu đỏ. Để tránh điều đó, bạn cần xóa phần tử bao bọc và đặt đầu vào là phần tử con trực tiếp của biểu mẫu
Bằng cách đó, đầu vào trong biểu mẫu sẽ không kế thừa các kiểu từ
2div:not[.old-fashioned] { font-family: Arial, sans-serif; }
Hỗ trợ CSS không phải bộ chọn
Điều quan trọng cần lưu ý là có hai phiên bản của bộ chọn :not[]
- một phiên bản chỉ chấp nhận một bộ chọn CSS đơn giản, duy nhất và bản cập nhật mới hơn cho :not[]
chấp nhận bất kỳ bộ chọn CSS nào
Tất cả các trình duyệt đều hỗ trợ các bộ chọn :not[]
đơn, đơn giản, giống như những bộ chọn chúng tôi đã sử dụng cho đến nay, bao gồm cả Internet Explorer. Tuy nhiên, không phải tất cả các trình duyệt đều hỗ trợ bộ chọn phức tạp. Với các bộ chọn đơn giản trong
div:not[.not-red] {
color: red;
}
9, bạn có thể thực hiện tất cả những việc sau
7div:not[.old-fashioned] { font-family: Arial, sans-serif; }
8div:not[.old-fashioned] { font-family: Arial, sans-serif; }
9div:not[.old-fashioned] { font-family: Arial, sans-serif; }
0
Tuy nhiên, những thứ như sau chỉ khả dụng với các bộ chọn phức tạp
1
2
3
May mắn thay, hỗ trợ cho các bộ chọn phức tạp vẫn còn khá cao. Trình duyệt duy nhất không hỗ trợ bộ chọn phức tạp hiện nay là Internet Explorer và một số trình duyệt di động