CSS `:not()` 是否選擇性地只針對直系子代和孫代？

:not() 選擇器是否擴及遠方後代？

在 CSS3 中，:not() 偽類提供了一種方法從選擇器中排除某些元素。然而，在處理遙遠的後代時，它的行為可能會令人困惑。

目前實作

根據官方文件和瀏覽器支援分析，:not() 選擇器僅適用於目標元素的直接子元素或孫元素。

考慮這一點例如：

此規則將為

的所有直接子代或孫代設定樣式。不是

的

但是，:not() 選擇者不會超出孫子元素。

問題

在此範例中，

;元素不是

的直接子代或孫代：

在這種情況下，

元素匹配*:not(p) 條件，因為它是

的後代，而

其中的元素繼承紅色。

解

正確的行為是

元素保持其預設顏色。為了實現這一點，規則應該針對所有

。直接元素：

CSS 選擇器等級4 的未來增強

CSS 選擇器等級4 提案增強了:not() 選擇器以接受完整的複雜選擇器組合器。這意味著我們將能夠編寫以下選擇器：

此擴展語法將允許更精確地定位遙遠的後代。

以上是CSS `:not()` 是否選擇性地只針對直系子代和孫代？的詳細內容。更多資訊請關注PHP中文網其他相關文章！