: ei () - CSS-trikid

Anonim

:not()Vara CSS on eitus pseudo klassi ja nõustub lihtsa valija või valija nimekirja argumendina. See sobib elemendiga, mida argument ei esinda. Edastatud argument ei tohi sisaldada täiendavaid valijaid ega pseudoelementide valijaid.

Võimalust kasutada valikute loendit argumendina peetakse eksperimentaalseks, kuigi selle kirjutamise ajal kasvab selle toetatavus, sealhulgas Safari (alates 2015. aastast), Firefox (alates detsembrist 2020) ja Chrome (alates jaanuarist 2021).

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

Selles näites on meil järjestamata loend, millel on üks klass

  • : 
    

      

    •

    Meie CSS valiks kõik

  • elemendid, välja arvatud klass (id) .different. 
    /* Style everything but the .different class */ li:not(.different) ( font-size: 3em; )

    Sama võiksite teha ka pseudoklasside abil, mida peetakse lihtsaks valijaks.

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

    Kuid kui me kasutame argumendina pseudoelemendi valijat, ei anna see oodatud tulemust.

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

    Komplekssed valijad

    /* select all

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

    Visuaalne näide

    Visuaalne esitus mitmesugustest kasutusaladest :not()

    Konkreetsus

    Spetsiifilisus :not pseudo-klass on spetsiifilisus oma argument. :not() Pseudo-klassi ei lisa valijat spetsiifilisus, erinevalt teistest pseudo-klassi.

    Läbirääkimisi ei tohi pesitseda, nii et see :not(:not(… )) pole kunagi lubatud. Autorid peaksid ka märkima, et kuna pseudoelemente ei peeta lihtsaks valijaks, ei kehti need argumendina :not(X). Olge atribuutide valijate kasutamisel tähelepanelik, kuna mõnda neist ei toetata laialdaselt kui teisi. :not Selektorite aheldamine teiste :not selektoritega on lubatud.

    Brauseri tugi

    :not()Pseudo klassi on uuendatud CSS lülitid Level 4 spetsifikatsioon võimaldab argument nimekirja. CSS-i selektorite 3. tasemel oli see võimeline aktsepteerima ainult ühte lihtsat valijat. Seetõttu on brauseritugi veidi jagatud 3. ja 4. tasandi mustandite vahel.

    Lihtsad selektorid

    IE Edge Firefox Chrome Safari Ooper
    9+ Kõik Kõik Kõik 12,1+ Kõik
    Android Chrome Android Firefox Androidi brauser iOS-i Safari Opera Mobile
    Kõik Kõik Kõik Kõik Kõik

    Valikute loendid

    Need brauseri tugiandmed pärinevad Caniuse'ilt, millel on üksikasjalikum teave. Number näitab, et brauser toetab selle versiooni ja uuemat funktsiooni.

    Töölaud

    Chrome Firefox IE Edge Safari
    88 84 Ei 88 9

    Mobiil / tahvelarvuti

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

    Rohkem informatsiooni

    • CSS-selektorite moodul 3. tase
    • CSS-selektorite 4. taseme spetsifikatsioon