首頁 > web前端 > css教學 > 為什麼 Safari 中的 `:not()` 選擇器與 Chrome 和 Firefox 中的行為不同?

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

DDD
發布: 2024-11-27 09:03:11
原創
651 人瀏覽過

Why Does the `:not()` Selector Behave Differently in Safari Compared to Chrome and 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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板