Uno sguardo al selettore di negazione CSS3 (NOT)
I CSS hanno alcuni selettori che ti permettono di selezionare elementi in determinate condizioni come : hover, :messa a fuoco, :attivo, ecc. Ancora oggi non riguarderemo quei selettori. Ne esamineremo uno che è ancora un metodo poco conosciuto ma usato dalla maggior parte dei web designer - questo è il :non selettore o anche noto come selettore di negazione.
Che cosa fa?
Sono sicuro che il :non il nome stesso ha già descritto la sua funzione, che semplicemente selezionerà l'opposto dell'elemento o condizione specificata. Per esempio:
Questa sintassi selezionerà qualsiasi elemento diverso da p (paragrafo).
: Non (p) Mentre la sintassi di esempio sotto selezionerà il div elemento che lo fa non avere lezione abc
div: Non (.abc) Va bene, ora, proviamo questo selettore in un esempio reale:
Prima di tutto, facciamo alcuni paragrafi con alcuni link da Wikipedia e alcuni link con domini fittizi. Ecco il codice HTML per il paragrafo.
Il CSS: non Selector Demo
Giuggiole applicate al sesamo scatta chupa chups torta al cioccolato. Torta della ciambella del toffee di wypas del dolce della caramella gommosa e molle dell'avena. Chupa chups jelly cupcake gummi orsetti. Cialda di gocce di limone.
Ciambella con torta al cioccolato e cheesecake gelatina dolce rotolo di polvere soufflà ??? torta al cioccolato. Wypas zucchero filato limone gocce biscotto caramello ciambella bonbon marzapane. Amarena caramelle liquirizia gelatina. Torta al cioccolato caramelle dolci marshmallow dragà ??  ?? à 'e cotton candy brownie marshmallow.
Artiglio di marshmallow guarnizione di pudding guarnizione. Gummies di pasticceria muffin torta biscotto della torta di frutta scatti di sesamo gelatina di panpepato. Artiglio di caramelle pudding cupcake orso. Focaccina di rotolo di tootsie di zucchero filato di torta di carota. Crostata di fagioli di gelatina dragè  Ã¨ dolce glassa wafer topping barretta di cioccolato. Dolce rotolo toffee zucchero plum cake dragà ??  à à © e muffin caramelle bonbon.
Torta di pasta frolla al marzapane torta di frutta wypas. Torta di cioccolato d'avena wypas dragà ????? zucchero e torta di carote glassa di prugne. Caramelle barretta di cioccolato croissant wafer cupcake pie jujubes barretta di cioccolato. Canne caramelle biscotto dragà ????? e.Candy brownie avena torta sesamo scatta cheesecake in polvere tootsie rotolo biscotto orso artiglio. Soufflà ?? Â' © gummi porta i jelly bean sesamo scatta faworki biscotto dessert dolce bonbon.
Il piano qui è: selezioneremo solo i link che non puntano a Wikipedia e quindi daremo a quei collegamenti un punto esclamativo per attirare l'attenzione su quei link.
In primo luogo, aggiungeremo un :dopo pseudo-elemento su tutti i link per posizionare il segno e lo definiamo come un inline-block elemento.
a: after display: inline-block;
Quindi, per selezionare ogni link che non punta a Wikipedia, combineremo il :non selettore con un selettore di attributi. Il selettore di attributi qui selezionerà ogni tag di ancoraggio con cui inizia l'attributo href http://en.wikipedia.org/ e combinandolo con il :non, ovviamente selezionerà il contrario. Quindi eccoci qui:
a: not ([href ^ = "http://en.wikipedia.org/"]): after background-color: # F8EEBD; border: 1px solid # EEC56D; border-radius: 3px 3px 3px 3px; colore: # B0811E; contenuto: "!"; font-size: 10pt; margin-left: 5px; imbottitura: 1px 6px; posizione: relativa;
Funziona! I tag di ancoraggio che non puntano a Wikipedia ora hanno un punto esclamativo.
Bug di Chrome
Se lo visualizzi in Chrome, noterai che l'effetto renderizzato non è come sopra. Tutti i collegamenti sembrano avere un punto esclamativo indipendentemente dall'URL.
Questo caso è stato effettivamente considerato un bug. Quindi, per correggere questo bug, dobbiamo aggiungere questa regola.
a [href ^ = "http://en.wikipedia.org/"] / * Chrome Hack * / display: inline-block;
E ora il problema avrebbe dovuto essere risolto.
- dimostrazione
Conclusione
In alcune circostanze usando il :non il selettore è davvero l'opzione più efficace, proprio come nell'esempio sopra, in cui siamo in grado di selezionare alcuni elementi casuali senza nemmeno aggiungere classi superflue o ulteriori markup al documento.
In realtà puoi creare ulteriori effetti utilizzando questo selettore, e questo è un esempio: Filter Functionality with CSS3
