Погледнете в селектора за отхвърляне (НЕ) на CSS3
CSS има някои селектори, които ви позволяват да избирате елементи в определени условия, като например : навъртам, : фокус, :активен, И все пак днес няма да покриваме тези селектори. Ще разгледаме един, който все още е малко известен метод, но се използва от повечето уеб дизайнери - това е :не или селектор за отрицание.
Какво прави?
Сигурен съм, че :не самото име вече е описало своята функция, която просто ще избере обратното на посочения елемент или условие. Например:
Този синтаксис ще избере всеки елемент, различен от р (Точка).
: Не (р) Докато примерният синтаксис по-долу ще избере Разделение елемент не имат клас абв
Разделение: Не (.abc) Добре, сега, нека опитаме този селектор в истински пример:
Първо, нека направим няколко параграфа с няколко връзки от Уикипедия и няколко връзки с измислени домейни. Ето HTML кода за абзаца.
CSS: не селектор
Jujubes приложите сусамовите щраквания на chupa chups шоколадова торта. Овесена торта маршмелоу уипас торта поничка торта. Chupa chups желиран меден мед. Лимонени капки вафлена торта.
Торта за шоколадова торта с чийзкейк желе сладък рол на прах soufflà ?? Â? à © © торта. Wypas памук бонбони лимон капки бисквитка бонбони поничка бонбон марципан. Макаруна бонбони сладник желе-о. Шоколадов пай сладък сладък крен бяла ружа dragà ?? В? à ©  © е памук бонбони брашно джудже.
Пудинг доливане на бонбони мечка нокът. Гънки за сладкиши от сладкиши плодов кекс бижута от суха медузи. Кенди пудинг кекс мечка нокът. Морков торта кифла памук бонбони tootsie ролка кифла. Желето боб тортата е сладката пудра шоколадова лента. Сладка ролка от шафранска сладка сладка пастет драг? бонбон сладкиши.
Тестени сладкиши от марципан кекс. Овесена торта шоколад wypas dragà ?? Â? Карамел шоколад бар кроасан вафли кекс пай jujubes шоколад бар. Бисквити бонбони бастуни драга? A? à © © e.Candy Брауни овесена торта сусам хапки чийзкейк прах tootsie ролка бисквити мечка нокът. Soufflà ??  ?? Ã' © gummi мечки желе боб сусам щракам faworki бисквита десерт сладък бонбон.
Планът тук е: ние ще изберем само връзките, които не сочат към Уикипедия и след това ще дадем на тези връзки удивителен знак, за да предупредим вниманието към тези връзки.
Първо, ще добавим :след псевдо-елемент на всички връзки, за да постави марката, и ние го определяме като Пътека блок елемент.
a: след 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 Bug
Ако видите това в Chrome, ще забележите, че рендираният ефект не е такъв, както по-горе. Всички връзки изглеждат с удивителен знак, независимо от URL адреса.
Този случай действително е бил адресиран като грешка. Така че, за да поправим тази грешка, трябва да добавим това правило.
a [href ^ = "http://en.wikipedia.org/"] / * Chrome Hack * / дисплей: вграден блок;
И сега проблемът трябваше да бъде фиксиран.
- Демонстрация
заключение
При някои обстоятелства използвайте :не Селекторът е наистина най-ефективната опция, точно както в горния пример, където можем да изберем някои случайни елементи, без дори да добавяме ненужен клас или допълнителна маркировка към документа.
Всъщност можете да създадете големи ефекти, като използвате този селектор и това е един пример: Функционалност на филтъра с CSS3
