A Nézd meg a CSS3 negatív (NOT) választót
A CSS-ben vannak olyan szelektorok, amelyek lehetővé teszik, hogy bizonyos körülmények között elemeket válasszon :lebeg, :fókusz, :aktív, stb. Ma még nem fedjük le ezeket a szelektorokat. Meg fogjuk nézni az egyiket, amely még mindig kevéssé ismert, de a legtöbb webes tervező használja - ez az :nem választó vagy más néven negációs választó.
Mit csinal?
Biztos vagyok benne, hogy a :nem maga a név már leírta a funkcióját, hogy egyszerűen kiválasztja a megadott elem vagy állapot ellenkezője. Például:
Ez a szintaxis bármely elemet választ p (bekezdés).
: Nem (p) Míg az alábbi szintaxis kiválasztja a div elemet nem van osztálya ABC
div: nem (.abc) Rendben, próbáljuk meg ezt a választót egy valós példában:
Először is, tegyünk néhány bekezdést a Wikipédia néhány linkjével és néhány linkkel a fantasztikus domainekkel. Itt van a bekezdés HTML jelölése.
A CSS: nem a Selector Demo
A Jujubes applikációs szezámmag a chupa chupszákat rágja csokoládétorta. Zab torta marshmallow wypas karamella fánk torta. Chupa chups zselés cupcake gummi medvék. Citromos csepp torta ostya.
Sajttorta csokoládé torta fánk zselés édes tekercs por soufflÃ?  Â? csokoládé torta. Wypas pamut cukorka citrom csepp cookie candy fánk bonbon marcipán. Macaroon édesség édesgyökér-zselé. Csokoládé torta édes tekercs cukorkát mályvacukor à  e e e e e e e cotton e cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton cotton.
Pudding feltöltő marshmallow medve karom. Pite muffin tészta gummies gyümölcstorta zselés mézeskalács szezámmagok. Candy puding cupcake medve karom. Sárgarépa torta muffin pamut cukorka tekercs muffin. A zselés bab tartós dragÃ? Â? ostya töltelék csokoládé. Édes tekercs karamell cukor szilva tészta dragÃ? Â? bonbon cukorka muffin.
Torta marcipán applikátor tészta wypas gyümölcstorta. Zabpogácsa csokoládé wypas dragÃ? Karamell csokoládé croissant ostya cupcake torta jujubes csokoládé. Biscuit candy canes dragà     ⠀ eCandy brownie zab torta szezámmag rágja sajttorta por tootsie roll keksz medve karom. Soufflà Â? süti desszert édes bonbon.
A terv itt van: csak azokat a linkeket választjuk ki, amelyek nem mutatják a Wikipédiát, majd ezeknek a linkeknek egy felkiáltójelet adnak, hogy figyelmeztessék a figyelmet ezekre a linkekre.
Először is hozzáadunk egy :után pseudo-elem az összes hivatkozáson, hogy a jelet elhelyezzük, és azt egyként definiáljuk inline-block elem.
a: után display: inline-block;
Ezután, hogy kiválasszon minden olyan linket, amely nem mutat Wikipédiára, akkor összeállítjuk a :nem szelektor attribútumválasztóval. Az attribútumválasztó itt minden horgonycímkét kiválaszt, amelyet a href attribútum kezd http://en.wikipedia.org/ és a :nem, nyilvánvalóan az ellenkezőjét választja. Tehát itt megyünk:
a: nem ([href ^ = "http://en.wikipedia.org/")): háttérszín: # F8EEBD; határ: 1px szilárd # EEC56D; határ-sugár: 3px 3px 3px 3px; szín: # B0811E; tartalom: "!"; betűméret: 10pt; margin-left: 5px; párnázás: 1px 6px; pozíció: relatív;
Működik! A Wikipédiára nem mutató horgonycímkéknek most felkiáltójelük van.
Chrome-hiba
Ha ezt a Chrome-ban látja, észre fogod venni, hogy a megjelenített hatás nem a fentiek szerint történik. Az összes hivatkozás felkiáltójellel rendelkezik, függetlenül az URL-től.
Ez az eset valójában hiba volt. Tehát a hiba kijavításához hozzá kell adnunk ezt a szabályt.
a [href ^ = "http://en.wikipedia.org/"] / * Chrome Hack * / kijelző: inline-block;
És most meg kellett volna oldani a problémát.
- Demó
Következtetés
Bizonyos körülmények között a :nem A szelektor valóban a leghatékonyabb opció, mint a fenti példa, ahol néhány véletlenszerű elemet kiválaszthatunk anélkül, hogy felesleges osztályt adnánk hozzá, vagy további jelölést a dokumentumhoz.
A választó segítségével valójában további nagy hatásokat építhet, és ez egy példa: Szűrési funkciók a CSS3-mal
