: ne () - CSS-triki

Anonim

:not()Hotel v CSS je negacija psevdo razred in sprejema preprosto izbiro ali seznam za izbiro kot argument. Ujema se z elementom, ki ga argument ne predstavlja. Posredovani argument ne sme vsebovati dodatnih izbirnikov ali kakršnih koli izbirnikov psevdoelementov.

Možnost uporabe seznama izbirnikov kot argumenta se šteje za eksperimentalno, čeprav v času pisanja te podpore narašča, vključno s Safari (od 2015), Firefoxom (od decembra 2020) in Chromom (od januarja 2021).

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

V tem primeru imamo neurejen seznam z enim razredom na

  • : 
    

      

    •

    Naš CSS bi izbral vse

  • elementi, razen tistih s razredom .different. 
    /* Style everything but the .different class */ li:not(.different) ( font-size: 3em; )

    To lahko storite tudi z uporabo psevdo razredov, ki veljajo za preprost izbirnik.

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

    Če pa kot argument uporabljamo izbirnik psevdo elementov, ne bo prinesel pričakovanega rezultata.

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

    Kompleksni izbirniki

    /* select all

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

    Vizualni primer

    Vizualna predstavitev različnih načinov uporabe :not()

    Specifičnost

    Posebnost :not psevdo-razreda je specifičnost njegovega argumenta. Za :not() razliko od drugih psevdo razredov psevdorazred ne prispeva k posebnosti izbirnika.

    Negacij ne sme biti ugnezdenih, zato :not(:not(… )) ni nikoli dovoljeno. Avtorji bi morali tudi opozoriti, da ker psevdoelementi ne veljajo za preprost izbirnik, niso veljavni kot argument :not(X). Bodite pozorni pri uporabi izbirnikov atributov, saj nekateri niso široko podprti kot drugi. Dovoljeno je povezovanje :not izbirnikov z drugimi :notizbirniki.

    Podpora brskalnika

    :not()Razred psevdo je bil posodobljen v CSS selektorji Stopnja 4 specifikacijo, da je seznam argumentov. V CSS Selectors Level 3 je lahko sprejel samo en preprost izbirnik. Kot rezultat, je podpora brskalnika nekoliko razdeljena med osnutke 3. in 4. stopnje.

    Preprosti izbirniki

    IE Rob Firefox Chrome Safari Opera
    9+ Vse Vse Vse 12,1+ Vse
    Android Chrome Android Firefox Brskalnik Android iOS Safari Opera Mobile
    Vse Vse Vse Vse Vse

    Seznami izbirnikov

    Ti podatki o podpori brskalnika so od Caniuse, ki vsebuje več podrobnosti. Številka pomeni, da brskalnik podpira to funkcijo v tej različici ali novejši.

    Namizje

    Chrome Firefox IE Rob Safari
    88 84 Ne 88 9.

    Mobilni / tablični računalnik

    Android Chrome Android Firefox Android iOS Safari
    88 85 81 9,0-9,2

    Več informacij

    • Modul izbirnikov CSS 3. stopnja
    • Specifikacija CSS Selectors Level 4