:has on anteeksiantamaton valitsin

Pieni juttu tapahtui matkalla julkaisuun CSS :has() valitsin vanhaan almanakkaan. alunperin kuvailin :has() "anteeksiantava" valitsin, jonka ajatuksena on, että kaikki sen argumentissa arvioidaan, vaikka yksi tai useampi kohteista olisi virheellinen.

/* Example: Do not use! */
article:has(h2, ul, ::-scoobydoo) { }

nähdä ::scoobydoo siellä? Se on täysin virheellinen. Anteeksiantava valitsinlista jättää huomiotta väärän valitsimen ja arvioi loput kohteet ikään kuin ne olisi kirjoitettu näin:

article:has(h2, ul) { }

:has() oli todellakin anteeksiantava valitsija edellisessä 7 päivätyssä luonnoksessa. Mutta se muuttui ongelman ilmoittamisen jälkeen että anteeksiantava luonne on ristiriidassa jQueryn kanssa, kun :has() sisältää monimutkaisen valitsimen (esim header h2 + p). W3C päätyi päätökseen tehdä :has() "anteeksiantamaton" valitsin vain muutama viikko sitten.

Eli edellinen esimerkkimme? Koko valitsinluettelo on virheellinen, koska väärä valitsin on virheellinen. Mutta kaksi muuta anteeksiantavaa valitsijaa, :is() ja :where(), jätetään ennalleen.

Tähän on olemassa pieni ratkaisu. Muistaa, :is() ja :where()ovat anteeksiantavia, vaikka :has() ei ole. Tämä tarkoittaa, että voimme sijoittaa jommankumman näistä valitsimista sisään :has() saadaksesi anteeksiantavamman käytöksen:

article:has(:where(h2, ul, ::-scoobydoo)) { }

Kummalla käytät, voi olla merkitystä, koska sen erityispiirteet :is() määräytyy sen luettelon tarkimman kohteen mukaan. Joten jos tarvitset jotain vähemmän erityistä, sinun kannattaa tavoittaa paremmin :where() koska se ei lisää spesifisyyttä.

/* Specificity: (0,0,1) */
article:has(:where(h2, ul, ::-scoobydoo)) { } /* Specificity: (0,0,2) */
article:has(:is(h2, ul, ::-scoobydoo)) { }

Päivitimme muutamia julkaisujamme vastaamaan uusimpia tietoja. Näen luonnossa paljon muita päivitystä vaativia, joten vain pieni PSA kaikille, jotka tarvitsevat saman.

• SEO-pohjainen sisällön ja PR-jakelu. Vahvista jo tänään.
• Platoblockchain. Web3 Metaverse Intelligence. Tietoa laajennettu. Pääsy tästä.
• Lähde: https://css-tricks.com/has-is-an-unforgiving-selector/