：HASは容赦ないセレクターです

年鑑にCSSセレクターを公開しているときに、ちょっとしたエピソードが起こりました。私は最初、:has()を「寛容」セレクターとして説明しました。つまり、1つ以上のアイテムが無効であっても、パラメーター内のすべてが評価されます。 :has()

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

を見ましたか？これは完全に無効です。寛容なセレクターリストは無効なセレクターを無視し、残りのアイテムをこのように書かれているように評価し続けます：::-scoobydoo

article:has(h2, ul) { }

2022年5月7日までにドラフトで、

は確かに寛容なセレクターです。しかし、問題を報告した後、状況は変化しました。これは、:has()が複雑なセレクター（例えば:has()）が含まれている場合、その寛容性はjQueryと矛盾すると述べています。 W3Cは、数週間前に解決策を発見し、「焦点なし」セレクターとして策定されました。 header h2 p :has()それで、私たちの前の例ですか？無効なセレクターが無効であるため、セレクターリスト全体が無効です。しかし、他の2つの許容範囲セレクター

および

は同じままです。 :is() :where()これには回避策があります。たとえ

と

が寛容であることを忘れないでください。これは、より寛容な動作のために、これら2つのセレクターのいずれかを:is()にネストできることを意味します。 :where() :has()使用するものは重要な場合があります。:has()の特異性は、リストの最も具体的なアイテムによって決定されるためです。したがって、より具体的でないものが必要な場合は、特異性スコアが増加しないため、

を使用することをお勧めします。

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

:is()最新情報を反映するためにいくつかの投稿を更新しました。私は野生で更新する必要がある他の多くのことを見てきたので、これは同じことをする必要がある人にとっては小さな公共サービスの発表です。 :where()

以上が：HASは容赦ないセレクターですの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。