Nhìn vào bộ chọn phủ định CSS3 (KHÔNG)
CSS có một số bộ chọn cho phép bạn chọn các thành phần trong một số điều kiện nhất định như :bay lượn, :tiêu điểm, : hoạt động, vv Tuy nhiên, hôm nay chúng tôi sẽ không bao gồm những người chọn. Chúng tôi sẽ xem xét một phương pháp vẫn còn ít được biết đến nhưng được sử dụng bởi hầu hết các nhà thiết kế web - đó là :không phải bộ chọn hay còn gọi là bộ chọn phủ định.
Nó làm gì?
Tôi chắc chắn rằng :không phải Tên chính nó đã mô tả chức năng của nó, rằng nó sẽ chỉ cần chọn ngược lại với yếu tố hoặc điều kiện quy định. Ví dụ:
Cú pháp này sẽ chọn bất kỳ yếu tố nào khác ngoài p (đoạn văn).
:Không p) Trong khi cú pháp ví dụ dưới đây sẽ chọn div yếu tố nào không phải có lớp học abc
div: không (.abc) Được rồi, bây giờ, hãy thử bộ chọn này trong một ví dụ thực tế:
Trước hết, hãy tạo một vài đoạn với một vài liên kết từ Wikipedia và một vài liên kết với các miền hư cấu. Đây là đánh dấu HTML cho đoạn văn.
CSS: không phải Selector Demo
Jujubes áp dụng vừng snaps chupa chups bánh sô-cô-la. Bánh yến mạch marshmallow wypas bánh kẹo bơ cứng. Chupa chups thạch cupcake gummi gấu. Lemon giọt bánh wafer.
Bánh donut sô cô la phô mai Thạch bột ngọt cuộn soufflà ??  ?? Ã' © bánh sô cô la. Kẹo bông Wypas chanh giọt bánh quy kẹo donut bonbon marzipan. Macaroon kẹo cam thảo thạch-o. Bánh sô cô la kẹo ngọt kẹo dẻo dragà ??  ?? Ã' © e kẹo bông brownie marshmallow.
Pudding topping marshmallow vuốt vuốt. Pie muffin bánh gummies bánh trái cây thạch gừng mè snaps. Kẹo pudding cupcake vuốt gấu. Bánh cà rốt muffin kẹo bông tootsie cuộn muffin. Thạch đậu tart dragà ??  ?? Ã' © e ngọt icing bánh wafer sô cô la. Bánh ngọt kẹo bơ cứng đường mận kéo lê ??  ?? Ã' © e bánh muffin kẹo bonbon.
Bánh marzipan áp dụng bánh ngọt bánh trái cây wypas. Bánh yến mạch sô cô la wypas dragà ??  ?? Ã' © e đường mận bánh cà rốt đường. Caramels thanh sô cô la croissant wafer cupcake bánh jujubes thanh sô cô la. Bánh quy kẹo kéo dragà ??  ?? Ã' © e.Candy brownie bánh yến mạch mè snaps cheesecake bột tootsie cuộn bánh quy gấu vuốt. Soufflà ??  ?? Ã' © gummi mang thạch đậu vừng snaps faworki bánh quy tráng miệng ngọt ngào.
Kế hoạch ở đây là: chúng tôi sẽ chỉ chọn các liên kết không trỏ đến Wikipedia và sau đó cung cấp cho các liên kết đó một dấu chấm than để cảnh báo sự chú ý đối với các liên kết đó.
Đầu tiên, chúng tôi sẽ thêm một :sau phần tử giả trên tất cả các liên kết để đặt dấu và chúng tôi xác định nó là một khối nội tuyến thành phần.
a: sau display: inline-block;
Sau đó, để chọn mọi liên kết không trỏ đến Wikipedia, chúng tôi sẽ kết hợp :không phải bộ chọn với một bộ chọn thuộc tính. Bộ chọn thuộc tính ở đây sẽ chọn mọi thẻ neo mà thuộc tính href bắt đầu bằng http://en.wikipedia.org/ và bằng cách kết hợp nó với :không phải, Nó rõ ràng sẽ chọn ngược lại. Vì vậy, ở đây chúng tôi đi:
a: not ([href ^ = "http://en.wikipedia.org/"]): sau nền-màu: # F8EEBD; viền: 1px solid # EEC56D; đường kính bán kính: 3px 3px 3px 3px; màu: # B0811E; Nội dung: "!"; cỡ chữ: 10pt; lề trái: 5px; đệm: 1px 6px; vị trí: tương đối;
Nó hoạt động! Các thẻ neo không trỏ đến Wikipedia bây giờ có dấu chấm than.
Lỗi Chrome
Nếu bạn xem điều này trong Chrome, bạn sẽ nhận thấy rằng hiệu ứng được hiển thị không như trên. Tất cả các liên kết dường như có dấu chấm than bất kể URL.
Trường hợp này đã thực sự được giải quyết như là một lỗi. Vì vậy, để sửa lỗi này, chúng ta cần thêm quy tắc này.
một [href ^ = "http://en.wikipedia.org/"] / * Chrome Hack * / display: inline-block;
Và bây giờ vấn đề đã được sửa chữa.
- Bản giới thiệu
Phần kết luận
Trong một số trường hợp sử dụng :không phải bộ chọn thực sự là tùy chọn hiệu quả nhất, giống như ví dụ trên, nơi chúng tôi có thể chọn một số phần tử ngẫu nhiên mà không cần thêm lớp không cần thiết hoặc đánh dấu bổ sung vào tài liệu.
Bạn thực sự có thể xây dựng thêm các hiệu ứng tuyệt vời bằng cách sử dụng bộ chọn này và đây là một ví dụ: Chức năng lọc với CSS3
