Các :not()bất động sản trong CSS là một lớp giả phủ định và chấp nhận một selector đơn giản hoặc một danh sách chọn như một cuộc tranh cãi. Nó khớp với một phần tử không được đại diện bởi đối số. Đối số đã qua không được chứa bộ chọn bổ sung hoặc bất kỳ bộ chọn phần tử giả nào.
Khả năng sử dụng danh sách các bộ chọn làm đối số được coi là thử nghiệm, mặc dù nó được hỗ trợ đang phát triển tại thời điểm viết bài này, bao gồm Safari (kể từ năm 2015), Firefox (từ tháng 12 năm 2020) và Chrome (từ tháng 1 năm 2021).
/* the X argument can be replaced with any simple selectors */ :not(X) ( property: value; )Trong ví dụ này, chúng tôi có một danh sách không có thứ tự với một lớp duy nhất trên
CSS của chúng tôi sẽ chọn tất cả
.different.
/* Style everything but the .different class */ li:not(.different) ( font-size: 3em; )Bạn cũng có thể làm điều tương tự bằng cách sử dụng các lớp giả được coi là một bộ chọn đơn giản.
p:not(:nth-child(2n+1)) ( font-size: 3em; )Tuy nhiên, nếu chúng tôi sử dụng bộ chọn phần tử giả làm đối số của chúng tôi, nó sẽ không tạo ra kết quả như mong đợi.
:not(::first-line) ( /* ::first-line is a pseudo element selector and not a simple selector */ color: white; )Bộ chọn phức tạp
/* select all
s that are not descendants of */ p:not(article *) ( )
Ví dụ trực quan
:not()
Tính đặc hiệu
Tính cụ thể của lớp :not giả là tính cụ thể của đối số của nó. Lớp :not() giả không thêm vào đặc tính của bộ chọn, không giống như các lớp giả khác.
Các phủ định có thể không được lồng vào nhau nên :not(:not(… )) không bao giờ được phép. Các tác giả cũng nên lưu ý rằng vì phần tử giả không được coi là một bộ chọn đơn giản, nên chúng không hợp lệ như một đối số :not(X). Hãy lưu ý khi sử dụng các bộ chọn thuộc tính vì một số không được hỗ trợ rộng rãi như những bộ khác. Cho phép liên kết :not bộ chọn với các :not bộ chọn khác .
Hỗ trợ trình duyệt
Lớp :not()giả đã được cập nhật trong đặc tả CSS Bộ chọn Cấp 4 để cho phép một danh sách đối số. Trong Bộ chọn CSS Cấp 3, nó chỉ có khả năng chấp nhận một bộ chọn đơn giản. Do đó, hỗ trợ trình duyệt bị chia cắt một chút giữa bản nháp Cấp 3 và Cấp 4.
Bộ chọn đơn giản
| I E | Cạnh | Firefox | Trình duyệt Chrome | Safari | Opera |
|---|---|---|---|---|---|
| 9+ | Tất cả | Tất cả | Tất cả | 12,1+ | Tất cả |
| Chrome dành cho Android | Android Firefox | Trình duyệt Android | iOS Safari | Opera Mobile |
|---|---|---|---|---|
| Tất cả | Tất cả | Tất cả | Tất cả | Tất cả |
Danh sách bộ chọn
Dữ liệu hỗ trợ trình duyệt này là từ Caniuse, có nhiều chi tiết hơn. Một con số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên.
Máy tính để bàn
| Trình duyệt Chrome | Firefox | I E | Cạnh | Safari |
|---|---|---|---|---|
| 88 | 84 | Không | 88 | 9 |
Di động / Máy tính bảng
| Chrome dành cho Android | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 81 | 9,0-9,2 |
Thêm thông tin
- Mô-đun Bộ chọn CSS cấp 3
- Đặc điểm kỹ thuật cấp 4 của Bộ chọn CSS