：有一個無情的選擇器

在將CSS :has() 選擇器發佈到《年鑑》的過程中，發生了一件小插曲。我最初將:has() 描述為一個“寬容”的選擇器，其含義是，其參數中的任何內容都會被評估，即使其中一個或多個項目無效。

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

看到::-scoobydoo了嗎？這完全無效。一個寬容的選擇器列表會忽略該無效選擇器，並繼續評估其餘項目，就像這樣編寫一樣：

article:has(h2, ul) { }

在2022年5月7日之前的草案中，:has() 確實是一個寬容的選擇器。但在報告了一個問題後，情況發生了變化，該問題指出，當:has() 包含複雜選擇器（例如header h2 p）時，其寬容特性與jQuery衝突。 W3C 在幾週前找到了一個解決方案，即將:has() 制定為“非寬容”選擇器。

因此，我們之前的示例？整個選擇器列表無效，因為無效選擇器無效。但其他兩個寬容選擇器:is() 和:where() 保持不變。

對此有一個變通方法。請記住，:is() 和 :where() 是寬容的，即使 :has() 不是。這意味著我們可以將這兩個選擇器中的任何一個嵌套在 :has() 中以獲得更寬容的行為：

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

您使用哪個可能很重要，因為:is() 的特異性由其列表中最特異的項目決定。因此，如果您需要不太特異的內容，最好使用:where()，因為它不會增加特異性分數。

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

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

我們更新了一些帖子以反映最新信息。我看到野外還有很多其他需要更新的內容，所以這是一個針對任何需要執行相同操作的人的小型公共服務公告。

以上是：有一個無情的選擇器的詳細內容。更多資訊請關注PHP中文網其他相關文章！