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

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

CSS3 :not() 偽類允許在選擇器中進行否定，排除與指定的模式。但是，其功能存在限制。

目前實作

如 CSS3 和 CSS 選擇器等級 4 文件中所述，:not() 目前僅匹配直接後代。在提供的範例中：

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

此選擇器的目標是

的直接子元素不是

。距離較遠的後代元素，即使包含在

中也是如此。嵌套在

中，不會受到影響。

繼承與樣式

樣式屬性的繼承會使 :not() 的行為更為複雜。在問題的範例中，

內的元素即使

繼承了其父級的紅色文字顏色。本身與 :not() 選擇器相符。這是因為否定套用於滿足指定條件的父元素

。

未來增強

CSS 選擇器等級 4 建議擴充： not() 包含完整的複雜選擇器和組合器。這將允許更精細的過濾，啟用選擇器，例如：

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

建議

由於:not() 的當前限制以及與繼承的潛在混淆，通常建議避免使用它來過濾遙遠的後代。考慮替代方法，例如使用直接選擇器或對您希望排除的元素套用特定樣式。一旦實現了對 :not() 中複雜選擇器的支持，此功能可能會變得更加有用。

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