Взгляд на CSS3 Negation (НЕ) Селектор
CSS имеет несколько селекторов, которые позволяют вам выбирать элементы в определенных условиях, таких как : парить, : фокус, : активный, и т.д. Однако сегодня мы не будем рассматривать эти селекторы. Мы рассмотрим метод, который до сих пор малоизвестен, но используется большинством веб-дизайнеров. :не селектор или также известный как селектор отрицания.
Что оно делает?
Я уверен, что :не само имя уже описало свою функцию, которую оно просто выберет противоположность указанного элемента или условия. Например:
Этот синтаксис выберет любой элемент, кроме п (параграф).
: Нет (р) В то время как приведенный ниже пример синтаксиса выберет ДИВ элемент, который делает не иметь класс азбука
ДИВ: нет (.abc) Хорошо, теперь давайте попробуем этот селектор в реальном примере:
Прежде всего, давайте сделаем несколько абзацев с несколькими ссылками из Википедии и несколькими ссылками с вымышленными доменами. Вот HTML-разметка для абзаца.
CSS: не селектор Демо
Jujubes аппликация кунжутные хлопья чупа чупс шоколадный торт. Пирог с овсяным зефиром, выпечкой ириски, пончик. Чупа-чупс, желе, кекс, кеды-мишки. Лимонные капли торт вафельный.
Чизкейк шоколадный торт пончик желе, сладкий рулет, суфле, шоколадное пирожное. Wypas сахарная вата с каплями лимона, печенье, пончик, конфета, марципан. Macaroon конфеты солодки желе-о. Шоколадный пирог сладкий рулет конфеты зефир перетаскивать сладкую вату брауни зефир.
Пудинг топпинг Зефир медведь коготь. Пирожные сдобные кондитерские жевательные конфеты кекс пирожное желе пряники кунжутные защелки. Конфеты пудинг кекс Медвежий коготь. Морковный кекс Маффин, сладкая вата. Желейные бобы кисло-сладкой глазурью вафельный батончик. Сладкая булочка с ириской, сахаром, сливовым тестом, дренажем сдобная конфета.
Торт из марципана выпечка Овсяное пирожное с шоколадной глазурью. Карамель шоколадный батончик круассан вафельный кекс пирожное ююбу шоколадный батончик. Бисквитные леденцы с булочками Drag? E? Candy Brownie овсяные пирожные кунжутные хлопья чизкейк порошок ролл бисквитный медвежонок рулет бисквит. Суфле гумми медведи желейные бобы кунжутные хлопья faworki печенье десерт сладкий бонбон.
План здесь такой: мы выберем только ссылки, которые не указывают на Википедию, а затем дадим этим ссылкам восклицательный знак, чтобы привлечь внимание к этим ссылкам..
Сначала мы добавим :после Псевдоэлемент на всех ссылках для размещения знака, и мы определяем его как встроенный блок элемент.
a: after display: inline-block;
Затем, чтобы выбрать каждую ссылку, которая не указывает на Википедию, мы объединим :не селектор с атрибутом селектора. Селектор атрибута здесь будет выбирать каждый тег привязки, с которого начинается атрибут href http://en.wikipedia.org/ и сочетая его с :не, это, очевидно, выберет обратное. Итак, поехали:
a: нет ([href ^ = "http://en.wikipedia.org/"]): после background-color: # F8EEBD; граница: 1px solid # EEC56D; радиус границы: 3px 3px 3px 3px; цвет: # B0811E; содержание: "!"; размер шрифта: 10pt; поле слева: 5 пикселей; обивка: 1px 6px; положение: относительное;
Оно работает! Теги привязки, которые не указывают на Википедию, теперь имеют восклицательный знак.
Chrome Bug
Если вы посмотрите на это в Chrome, вы заметите, что эффект рендеринга не такой, как указано выше. Все ссылки имеют восклицательный знак независимо от URL.
Этот случай фактически был рассмотрен как ошибка. Итак, чтобы исправить эту ошибку, нам нужно добавить это правило.
a [href ^ = "http://en.wikipedia.org/"] / * Chrome Hack * / display: inline-block;
И теперь проблема должна была быть решена.
- демонстрация
Заключение
В некоторых случаях, используя :не Селектор действительно является наиболее эффективным вариантом, как и в приведенном выше примере, где мы можем выбирать некоторые случайные элементы, даже не добавляя ненужный класс или дополнительную разметку к документу..
На самом деле вы можете создавать отличные эффекты, используя этот селектор, и это один из примеров: Функциональность фильтра с помощью CSS3
