O privire asupra selectorului CSS3 Negation (NOT)
CSS are câțiva selectori care vă permit să selectați elemente în anumite condiții, cum ar fi :planare, : focus, :activ, etc. Cu toate acestea, astăzi nu vom acoperi acești selectori. Vom analiza una care este încă o metodă puțin cunoscută, dar utilizată de majoritatea designerilor web - adică :nu selector sau de asemenea cunoscut ca selector de negare.
Ce face?
Sunt sigur că :nu numele însuși și-a descris deja funcția, că va selecta pur și simplu opusul elementului sau condiției specificate. De exemplu:
Această sintaxă va selecta orice alt element decât p (paragraf).
: Nu (p) În timp ce sintaxa de mai jos va selecta div element care face nu au clasă abc
div: nu (.abc) Bine, acum, să încercăm acest selector într-un exemplu real:
Mai intai, sa facem cateva paragrafe cu cateva link-uri de la Wikipedia si cateva link-uri cu domeniile fictive. Aici este marcajul HTML pentru paragraf.
CSS: nu Selector Demo
Jujubes aplicake susame snaps chupa chups tort de ciocolata. Tort de ovaz marshmallow wypas toffee tort gogoasa. Chupa chups jelly cupcake gummi poartă. Lemon picătură placheta de tort.
Cheesecake gogoasa tort ciocolată jelly dulce roll pulbere sufflà ¢  ¢ Ã' © tort de ciocolată. Wypas bomboane de bomboane de lamaie picături de bomboane bomboane gogoasa bonz marzipan. Macaroon bomboane de lemn dulce-o. Ciocolată plăcintă bomboană dulce bezea dragă ???????????????????????????????????.
Pudding topping marshmallow poartă gheara. Pieptene de gheață de muffin fructe de mare jelly gingerbread sesame snaps. Bomboană cu budincă de bomboane. Carrot tort bomboane de bumbac bomboane tootsie rulou brioșă. Jelly fasole dulce dragă ???????? dulce dulce placa de bomboane de top cu bomboane. Sweet roll caramelă prăjitură de prune dragă ?????????? bomboane bomboane de bonbon.
Cake marzipan aplicate patiserie wypas fruitcake. Ovăz tort ciocolată wypas dragà ¢ â,¬â "Ăs prăjitură prăjitură prăjitură de morcov prăjitură. Caramele de ciocolată bar croissant wafer cupcake plăcintă jujubes ciocolată bar. Biscuiti bomboane dulciuri dragà ¢ â,¬Å "à© e.Candy prajitură de ovaz tort de susan snaps prajitura de praf tootsie rulou biscuiti urs gheare. Soufflà ¢  ¢ à ¢ â,¬Â gummi poartă urzică de fasole de susan snaps faworki cookie dulce dulce bonbon.
Planul este aici: vom selecta doar legăturile care nu indică Wikipedia și apoi le vom da aceste linkuri un semn de exclamare pentru a atrage atenția asupra acestor linkuri.
În primul rând, vom adăuga un :după pseudo-element pe toate link-urile pentru a plasa marca, și o definim ca o inline-block element.
a: după display: inline-block;
Apoi, pentru a selecta fiecare legătură care nu indică Wikipedia, vom combina :nu selector cu un selector de atribute. Selectorul de atribute va selecta aici fiecare etichetă de ancorare de la care începe atributul href http://en.wikipedia.org/ și prin combinarea cu :nu, va selecta evident opusul. Deci, aici mergem:
a: nu ([href ^ = "http://en.wikipedia.org/"]): după background-color: # F8EEBD; frontieră: 1px solid # EEC56D; raza de graniță: 3px 3px 3px 3px; culoare: # B0811E; conținut: "!"; font-size: 10pt; margin-stânga: 5px; umplutură: 1px 6px; poziția: relativă;
Functioneaza! Etichetele de ancoră care nu indică Wikipedia au acum un semn de exclamare.
Chrome Bug
Dacă vedeți acest lucru în Chrome, veți observa că efectul randat nu este cel de mai sus. Toate legăturile par să aibă un semn de exclamare, indiferent de adresa URL.
Acest caz a fost de fapt abordat ca un bug. Deci, pentru a rezolva această eroare, trebuie să adăugăm această regulă.
o [href ^ = "http://ro.wikipedia.org/"] / * Chrome Hack * / afișare: inline-block;
Și acum problema trebuia să fie rezolvată.
- Demo
Concluzie
În unele cazuri, folosiți :nu selectorul este într-adevăr cea mai eficientă opțiune, la fel ca și exemplul de mai sus, unde putem selecta unele elemente aleatoare fără a adăuga chiar clase inutile sau marcare suplimentară a documentului.
De fapt, puteți construi efecte extraordinare utilizând acest selector și acesta este un exemplu: funcționalitatea filtrului cu CSS3
