CSS :not() 是否選擇性地定位遠方後代元素？

CSS :not() 選擇器可以定位遠方後代嗎？

CSS3 :not() 偽類旨在排除元素匹配指定的選擇器。它對定位遠親後代的支持有限。

實現和支援

:not() 選擇器在現代瀏覽器中有部分實現，但它支援針對遠親後代是有限的。它主要對元素的直接子元素進行操作。

遠端後代的行為

在您的範例中，:not(p) 選擇器不會影響

內的元素，即使它是

的後代。這是因為 :not() 只否定直接子選擇器。 元素符合 :not(p) 標準，其顏色設定為紅色。隨後，

元素從其父元素

繼承此顏色。

預期行為與實際行為

您期望

元素保持不受 :not() 選擇器的影響，但它繼承了顏色變化。這不是針對遠親後代的預期行為。

解決方案

僅專門設定樣式

中的元素，您應該使用更直接的選擇器：

div p {
    color: black;
}

CSS 選擇器等級 4的增強

CSS 選擇器等級 4 建議擴充： not() 接受帶有組合器的複雜選擇器。這將使您能夠更靈活地定位遠親。實作後，您可以編寫以下選擇器：

p:not(div p) {
    color: red;
}

此選擇器將針對所有

不是

直接後代的元素。

以上是CSS :not() 是否選擇性地定位遠方後代元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！