: ne () - CSS-gudrybės

Anonim

:not()CSS nuosavybė yra neigimas pseudo klasę ir priima paprastą jungiklį arba pasirinkimo sąrašą kaip argumentą. Jis atitinka elementą, kurio neatstovauja argumentas. Pateiktame argumente negali būti papildomų selektorių ar pseudoelementų selektorių.

Galimybė naudoti atrankų sąrašą kaip argumentą laikoma eksperimentine, nors jo rašymo metu jo palaikymas auga, įskaitant „Safari“ (nuo 2015 m.), „Firefox“ (nuo 2020 m. Gruodžio mėn.) Ir „Chrome“ (nuo 2021 m. Sausio mėn.).

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

Šiame pavyzdyje mes turime nesutvarkytą sąrašą su viena klase

  • : 
    

      

    •

    Mūsų CSS pasirinktų visus

  • elementai, išskyrus tuos, kurių klasė yra .different. 
    /* Style everything but the .different class */ li:not(.different) ( font-size: 3em; )

    Taip pat galite tai padaryti naudodami pseudo klases, kurios laikomos paprastu parinkikliu.

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

    Tačiau jei kaip argumentą naudosime pseudo elementų selektorių, tai neduos laukiamo rezultato.

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

    Kompleksiniai selektoriai

    /* select all

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

    Vaizdinis pavyzdys

    Vizualus įvairaus naudojimo :not()

    Specifiškumas

    Iš specifiškumas :not pseudo-klasės yra jos argumento specifiškumas. :not() Pseudo klasę neprideda prie selektoriaus specifika, skirtingai nuo kitų pseudo-klases.

    Derybos negali būti įterptos, todėl :not(:not(… )) niekada neleidžiamos. Autoriai taip pat turėtų atkreipti dėmesį į tai, kad pseudoelementai nėra laikomi paprastu parinkikliu, todėl jie nėra tinkami argumentai :not(X). Būkite atidūs naudodami atributų parinkiklius, nes kai kurie nėra plačiai palaikomi, kaip kiti. Leidžiama pasirinkti grandines :not su kitais :notselektoriais.

    Naršyklės palaikymas

    :not()Pseudo klasė buvo atnaujinta CSS selektoriai 4 lygis specifikacijos leisti argumentas sąrašą. 3 lygio CSS selektoriuose jis galėjo priimti tik vieną paprastą selektorių. Todėl naršyklės palaikymas yra šiek tiek padalytas tarp 3 ir 4 lygio juodraščių.

    Paprasti selektoriai

    T.Y Briauna „Firefox“ „Chrome“ „Safari“ Opera
    9+ Viskas Viskas Viskas 12.1+ Viskas
    „Android Chrome“ „Android Firefox“ „Android“ naršyklė „iOS Safari“ „Opera Mobile“
    Viskas Viskas Viskas Viskas Viskas

    Selektorių sąrašai

    Šie naršyklės palaikymo duomenys yra iš „Caniuse“, kuri turi daugiau informacijos. Skaičius rodo, kad naršyklė palaiko šios ir naujesnės versijos funkciją.

    Darbalaukis

    „Chrome“ „Firefox“ T.Y Briauna „Safari“
    88 84 Ne 88 9

    Mobilusis / planšetinis kompiuteris

    „Android Chrome“ „Android Firefox“ „Android“ „iOS Safari“
    88 85 81 9.0–9.2

    Daugiau informacijos

    • 3 lygio CSS selektorių modulis
    • CSS selektorių 4 lygio specifikacija