: a un sélecteur impitoyable

Un petit épisode s'est produit lors de la publication du sélecteur CSS :has() à l'annuaire. J'ai initialement décrit :has() comme un sélecteur "pardonnant", ce qui signifie que tout dans ses paramètres sera évalué même si un ou plusieurs des éléments sont invalides.

/* 示例：请勿使用！*/
article:has(h2, ul, ::-scoobydoo) { }

avez-vous vu ::-scoobydoo? Ceci est complètement invalide. Une liste de sélecteurs indulgente ignore le sélecteur non valide et continue d'évaluer le reste des éléments comme écrit comme ceci:

article:has(h2, ul) { }

Dans le projet avant le 7 mai 2022, :has() est en effet un sélecteur tolérant. Mais après avoir signalé un problème, les choses ont changé, ce qui indique que lorsque :has() contient des sélecteurs complexes (par exemple header h2 p), sa nature de tolérance est en conflit avec jQuery. W3C a trouvé une solution il y a quelques semaines, pour être formulée comme un sélecteur "non ciblé". :has()

donc, notre exemple précédent? L'ensemble de la liste des sélecteurs n'est pas valide car le sélecteur non valide n'est pas valide. Mais les deux autres sélecteurs de tolérance

et :is() restent les mêmes. :where()

Il y a une solution de contournement pour cela. N'oubliez pas que

et :is() pardonnent, même si :where() ne l'est pas. Cela signifie que nous pouvons nist l'un de ces deux sélecteurs dans :has() pour un comportement plus tolérant: :has()

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

Le celui que vous utilisez peut être important car la spécificité de

est déterminée par les éléments les plus spécifiques de sa liste. Par conséquent, si vous avez besoin de quelque chose de moins spécifique, il est préférable d'utiliser :is() car il n'augmente pas le score de spécificité. :where()

/* 特异性：(0,0,1) */
article:has(:where(h2, ul, ::-scoobydoo)) { }

/* 特异性：(0,0,2) */
article:has(:is(h2, ul, ::-scoobydoo)) { }

Nous avons mis à jour certains articles pour refléter les dernières informations. J'ai vu beaucoup d'autres choses qui doivent être mises à jour dans la nature, c'est donc une petite annonce de service public pour tous ceux qui ont besoin de faire de même.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!