出版の途中でちょっとした出来事がありました CSS :has() セレクタ 古い年鑑に。 もともと説明していた :has() 「寛容な」セレクターとして、XNUMX つ以上のアイテムが無効であっても、引数のすべてが評価されるという考え方です。
/* Example: Do not use! */
article:has(h2, ul, ::-scoobydoo) { }見る ::scoobydoo そこで？ それは完全に無効です。 寛容なセレクター リストは、その偽のセレクターを無視し、次のように記述されているかのように残りの項目を評価します。
article:has(h2, ul) { }
:has() 確かに寛容なセレクターでした 7 年 2022 月 XNUMX 日付けの以前のドラフトで. しかし、それは変わりました 問題が報告された後 寛容な性質は、次の場合に jQuery と競合します。 :has() 複雑なセレクターを含む (例: header h2 + p）。 W3C は次の決議に達しました。 make :has() 「容赦ない」セレクター ほんの数週間前。
では、前の例でしょうか。 偽のセレクターが無効であるため、セレクター リスト全体が無効です。 しかし、他の XNUMX つの寛容なセレクターは、 :is() および :where()、変更されません。
これにはちょっとした回避策があります。 覚えて、 :is() および :where()たとえ、 :has() ではありません。 つまり、これらのセレクターのいずれかを入れ子にすることができます :has() より寛容な行動を得るには：
article:has(:where(h2, ul, ::-scoobydoo)) { }どちらを使用するかが重要になる可能性があります。 :is() リスト内の最も具体的な項目によって決定されます。 したがって、具体的ではないものが必要な場合は、 :where() 特異性スコアに追加されないためです。
/* Specificity: (0,0,1) */
article:has(:where(h2, ul, ::-scoobydoo)) { } /* Specificity: (0,0,2) */
article:has(:is(h2, ul, ::-scoobydoo)) { }最新情報を反映するために、いくつかの投稿を更新しました。 他にも更新が必要な人がたくさんいるので、同じことをする必要がある人にはちょっとしたPSAです.
- SEO を活用したコンテンツと PR 配信。 今日増幅されます。
- Platoblockchain。 Web3メタバースインテリジェンス。 知識の増幅。 こちらからアクセスしてください。
- 情報源： https://css-tricks.com/has-is-an-unforgiving-selector/
