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

:not() Safari、Chrome 和Firefox 之間的選擇器差異

瀏覽器通常會實現具有不同功能的功能，從而導致渲染差異。 CSS :not() 選擇器就是這樣一種情況，它在 Safari、Chrome 和 Firefox 中表現出不同的行為。

問題：

:not()在參數中指定多個層級時，選擇器無法如預期運作。在此範例中：

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

Safari 將文字呈現為藍色，而 Chrome 和 Firefox 使用紅色。

原因：

根本原因是 Safari 最近實現的 4 級 :not() 選擇器，它允許複雜的選擇器作為參數。另一方面，Chrome 和 Firefox 在目前版本的 :not() 中僅支援單級參數。

說明：

複雜選擇器包含多個由組合符分隔的複合選擇器（例如，後代、兄弟）。在本例中，「p div」是一個複雜選擇器，由兩個複合選擇器（「p」和「div」）組成，由後代組合器分隔。

預期行為：

根據:not() 的4 級規範，選擇器應將“blue”規則應用於不在“div”元素內的任何“ em”元素，無論它是否嵌套在“p”元素內。

當前狀態：

預計 Chrome 和 Firefox 最終將採用新規範，從而導致跨瀏覽器的一致行為。在那之前，開發人員應該意識到在這些瀏覽器中使用具有多個層級的 :not() 選擇器時可能存在的差異。

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