: nav () - CSS-triki

Anonim

:not()Īpašums CSS ir noliegums pseido klases un pieņem vienkāršu selektoru vai selektora sarakstu kā argumentu. Tas atbilst elementam, kuru neatspoguļo arguments. Pieņemtajā argumentā nedrīkst būt papildu selektori vai pseidoelementu selektori.

Spēja izmantot atlasītāju sarakstu kā argumentu tiek uzskatīta par eksperimentālu, lai gan šī raksta sagatavošanas laikā tā atbalstīšana pieaug, tostarp Safari (kopš 2015. gada), Firefox (kopš 2020. gada decembra) un Chrome (kopš 2021. gada janvāra).

/* the X argument can be replaced with any simple selectors */ :not(X) ( property: value; )

Šajā piemērā mums ir nesakārtots saraksts ar vienu klasi

  • : 
    

      

    •

    Mūsu CSS izvēlētos visus

  • elementi, izņemot tos, kas klasē .different. 
    /* Style everything but the .different class */ li:not(.different) ( font-size: 3em; )

    Jūs varētu darīt tāpat, izmantojot pseido klases, kuras tiek uzskatītas par vienkāršu atlasītāju.

    p:not(:nth-child(2n+1)) ( font-size: 3em; )

    Tomēr, ja kā argumentu izmantosim pseido elementu atlasītāju, tas nedos gaidīto rezultātu.

    :not(::first-line) ( /* ::first-line is a pseudo element selector and not a simple selector */ color: white; )

    Kompleksi atlasītāji

    /* select all

    s that are not descendants of */ p:not(article *) ( )

    Vizuāls piemērs

    Vizuāls attēlojums dažādiem lietojumiem :not()

    Konkrētība

    No specifika :not pseido-klase ir specifika savu argumentu. :not() Pseido-klases nav pievienot selektora specifiku, atšķirībā no citiem pseido-klasēs.

    Sarunas nedrīkst būt ligzdotas, tāpēc :not(:not(… )) nekad nav atļautas. Autori arī ņem vērā, ka, tā kā pseidoelementi netiek uzskatīti par vienkāršu atlasītāju, tie nav derīgi kā arguments :not(X). Esiet uzmanīgs, lietojot atribūtu atlasītājus, jo daži no tiem netiek plaši atbalstīti kā citi. Ir pieļaujama selektoru ķēde :not ar citiem :notselektoriem.

    Pārlūkprogrammas atbalsts

    :not()Pseido klase ir atjaunināta ar CSS selektori 4. līmeņa specifikācijas, lai ļautu argumentu sarakstā. CSS selektoros 3. līmenī tas varēja pieņemt tikai vienu vienkāršu selektoru. Rezultātā pārlūka atbalsts ir nedaudz sadalīts starp 3. un 4. līmeņa melnrakstiem.

    Vienkārši atlasītāji

    IE Mala Firefox Chrome Safari Opera
    9+ Viss Viss Viss 12.1+ Viss
    Android Chrome Android Firefox Android pārlūks iOS Safari Opera Mobile
    Viss Viss Viss Viss Viss

    Atlasītāju saraksti

    Šie pārlūka atbalsta dati ir no Caniuse, kurai ir sīkāka informācija. Cipars norāda, ka pārlūks atbalsta šo un jaunākās versijas funkciju.

    Darbvirsma

    Chrome Firefox IE Mala Safari
    88 84. Nē 88 9

    Mobilais / planšetdators

    Android Chrome Android Firefox Android iOS Safari
    88 85 81. 9.0-9.2

    Vairāk informācijas

    • CSS atlasītāju 3. līmeņa modulis
    • CSS selektoru 4. līmeņa specifikācija