Перегляньте селектор заперечення CSS3 (НЕ)
У CSS є деякі селектори, які дозволяють вибирати елементи в певних умовах, наприклад : hover, : фокус, : active, Але сьогодні ми не будемо охоплювати ці селектори. Ми подивимося на той, який все ще є мало відомим методом, але використовується більшістю веб-дизайнерів - це саме те : ні або селектор заперечення.
Що це робить?
Я впевнений, що : ні Сама назва вже описала свою функцію, яку вона просто вибере протилежність зазначеному елементу або стану. Наприклад:
Цей синтаксис вибере будь-який елемент, окрім стор (абзац).
: ні (p) У прикладі синтаксису нижче буде позначено пункт div елемент, який робить ні мають клас abc
div: not (.abc) Гаразд, давайте спробуємо цей селектор у реальному прикладі:
Перш за все, давайте зробимо кілька абзаців з кількома посиланнями з Вікіпедії та кількома посиланнями з вигаданими доменами. Ось HTML-розмітка для абзацу.
CSS: не селектор
Застосовують кунжутні цуп-чпу шоколадний торт. Овес торт зефір wypas ірис пончик торт. Chupa chups желейний кекс гумми ведмедів. Лимонний краплі торт вафельні.
Чізкейк шоколадний торт пончик желе солодкий рол порошок soufflà ?? Випас цукрова вата лимон падає печиво цукерки пончик бонбон марципан. Мигдальне печиво цукерки лакриці желе. Шоколадний пиріг солодкий рол цукерки зефір dragà ©  © e бавовна цукерки льодяник.
Пудинг доліва зефір ведмідь кіготь. Кекс кекс тісто gummies кекс кекс желе пряники Сезам защелки. Цукерки пудинг кекс ведмідь кіготь. Морквяний торт кекс бавовна цукерки тооці рол кексу. Желейні боби терпкі перетягують солодку глазур вафельні доліва шоколад. Солодкий рол Іриска цукрового сливового тіста драга ?? цукерки цукерок.
Торт марципановий аплікаційний кондитерський wypas кекс. Вівсяний торт шоколадний wypas dragÃ? Карамель шоколадний бар круасан вафельний кекс пиріг jujubes шоколад бар. Печиво цукерки тростини dragà ?? Â? E © e.Candy Брауні вівсяний пиріг кунжуту защелки чізкейк порошок tootsie roll печиво ведмідь кіготь. Soufflà ??  ?? à © © gummi несе желе бобів кунжут застібки faworki печиво десерт солодкий цукерки.
У цьому плані: ми виділимо лише посилання, які не вказують на Вікіпедію, а потім надаємо цим посиланням знак оклику, щоб привернути увагу до цих посилань..
По-перше, ми додамо : після псевдоелемент на всіх посиланнях, щоб помістити позначку, і ми визначимо його як вбудований блок елемент.
a: after display: inline-block;
Потім, щоб вибрати кожне посилання, яке не вказує на Вікіпедію, ми поєднаємо : ні з селектором атрибутів. Вибір атрибутів тут буде вибирати кожен тег прив'язки, з яким починається атрибут href http://en.wikipedia.org/ і шляхом поєднання його з : ні, воно очевидно вибере протилежне. Отже, ми йдемо:
a: not ([href ^ = "http://en.wikipedia.org/"]): після background-color: # F8EEBD; кордон: 1px твердий # EEC56D; прикордонний радіус: 3px 3px 3px 3px; колір: # B0811E; контент: "!"; розмір шрифту: 10pt; margin-left: 5px; прокладка: 1px 6px; позиція: відносна;
Це працює! Теги прив'язки, які не вказують на Вікіпедію, тепер мають знак оклику.
Помилка Chrome
Якщо ви переглядаєте це в Chrome, ви помітите, що ефект візуалізації не такий. Всі посилання мають знак оклику незалежно від URL-адреси.
Цей випадок насправді розглядається як помилка. Отже, щоб виправити цю помилку, нам потрібно додати це правило.
a [href ^ = "http://en.wikipedia.org/"] / * Chrome Hack * / відображення: вбудований блок;
І тепер проблема повинна була бути виправлена.
- Демо
Висновок
За деяких обставин використовуйте : ні Селектор дійсно є найбільш ефективним варіантом, так само, як і наведений вище приклад, де ми можемо вибрати деякі випадкові елементи, навіть не додаючи непотрібний клас або додаткову розмітку до документа.
Насправді ви можете створювати великі ефекти, використовуючи цей селектор, і це один з прикладів: Функція фільтрації з CSS3
