為什麼我的 CSS `:not()` 選擇器失敗，要如何修復？

為什麼:not() 選擇器在CSS 中失敗

儘管jQuery 的:not() 選擇器聲稱符合CSS3，但它符合CSS3，但它符合與標準有很大不同CSS 中的:not() 選擇器。

jQuery擴充

雖然標準 :not() 只接受單一簡單選擇器作為參數，但 jQuery 允許任意選擇器，包括逗號分隔的選擇器清單。

CSS 限制

相較之下，標準 :not()有嚴格的限制限制：

• 無法傳遞逗號分隔的選擇器
• 無法將簡單選擇器組合成複合選擇器
• 無法使用組合器（例如空格）

原因失敗

在給定的場景中，CSS 修改嘗試複製jQuery 的:not() 行為，由於以下原因，該行為不是有效的CSS：

• 除以不允許使用逗號（例如:not(.alpha, .beta, .gamma)）。
• 傳遞複合詞選擇器（例如，body > div）在 :not() 中無效。

純CSS 解決方法

要在純CSS 中實現所需的結果，有必要連結多個:not() 選擇器：

#sectors > div:not(.alpha):not(.beta):not(.gamma)

但是，這種方法是比jQuery 的擴充:not() 語法更容易出錯且不一致。

未來發展

選擇器4 增強了:not() 以接受逗號分隔的列表複雜的選擇器，這將使其與jQuery 保持一致，並使其在未來更加通用。

以上是為什麼我的 CSS `:not()` 選擇器失敗，要如何修復？的詳細內容。更多資訊請關注PHP中文網其他相關文章！