為什麼 Safari 中的 `:not()` 選擇器與 Chrome 和 Firefox 中的行為不同？

:not() 選擇器差異：Safari 與Chrome/Firefox

:not() CSS 選擇器，用於從清單中排除特定元素與Chrome 和Firefox 相比，Safari 中的選擇行為有所不同。這種差異給開發人員帶來了困惑，促使他們對其根本原因進行調查。

根據最近的觀察，Safari 現在完全支援 :not() 的 4 級規範，該規範允許在其參數中使用複雜的選擇器。此功能使其與 jQuery 的實作保持一致。但是，Chrome 和 Firefox 目前僅支援簡單選擇器作為 :not() 的參數。

:not() 選擇器異常源自於括號內使用複雜選擇器。複雜選擇器由多個由組合器連接的簡單選擇器組成，例如後代、相鄰同級和一般同級。在提供的程式碼片段中，選擇器 p div 表示一個複雜選擇器，因為它將兩個簡單選擇器（p 和 div）與後代組合器組合在一起。

由於 Chrome 和 Firefox 不支援 :not( 的複雜選擇器) 參數，所提供程式碼中的 p div 部分無法辨識。因此，:not() 選擇器實際上被忽略，並且後備規則 em:not(...) 適用。此後備規則將紅色指定為所有 元素的顏色，它是 Chrome 和 Firefox 中觀察到的紅色文字的原因。

相反，Safari 支援 :not() 中的複雜選擇器，正確排除

中的 元素紅色規範中的元素。這會導致 Safari 中顯示藍色文字。

目前，Chrome 和 Firefox 何時支援 :not() 複雜選擇器的時間表仍不確定。然而，Safari 中 4 級規範的實現是一項重大發展，使其與最新的 Web 標準保持一致，並為 CSS 選擇器提供了增強的功能。

以上是為什麼 Safari 中的 `:not()` 選擇器與 Chrome 和 Firefox 中的行為不同？的詳細內容。更多資訊請關注PHP中文網其他相關文章！