為什麼 Safari、Chrome 和 Firefox 使用 CSS `:not()` 選擇器顯示不同的結果？

:not() 選擇器在Safari、Chrome 和Firefox 中的差異

:not() 選擇器用於選擇不匹配的元素與一組指定的選擇器不符。但是，此選擇器在不同瀏覽器中的行為方式可能會不一致，如以下程式碼所示：

em:not(div) {
    color: red
}
em:not(p div) {
    color: blue
}

<p>
    <em>FOO</em>
</p>

在Safari 中，上述程式碼將「FOO」文字呈現為藍色，而在Chrome 和Firefox 中，它呈現為紅色。此行為是由於 Safari 中最近的更新實現了 :not() 的 4 級版本，這使得它能夠處理更複雜的選擇器。

在 :not() 的目前實作中，只有單一簡單的選擇器支援選擇器作為參數。目前設計不支援複雜的選擇器，例如“p div”。因此，在 Chrome 和 Firefox 中，:not(p div) 規則無法套用，並且「FOO」文字會依照第一條規則繼承紅色。

然而，Safari 實作了更高階的功能4 級規範，允許 :not() 參數使用複雜的選擇器。因此，:not(p div) 規則與“FOO”元素匹配，從而產生藍色。

這種差異凸顯了開發跨瀏覽器相容網站時的潛在挑戰和注意事項。隨著新版本的瀏覽器引入更新的 CSS 規範，有必要追蹤瀏覽器相容性和潛在的實作差異。

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