CSS `:not()` 是否选择性地仅针对直系子代和孙代？

:not() 选择器是否扩展到远方后代？

在 CSS3 中，:not() 伪类提供了一种方法从选择器中排除某些元素。然而，在处理遥远的后代时，它的行为可能会令人困惑。

当前实现

根据官方文档和浏览器支持分析，:not() 选择器仅适用于目标元素的直接子元素或孙元素。

考虑这一点例如：

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

此规则将为

的所有直接子代或孙代设置样式。不是

的

但是，:not() 选择器不会超出孙子元素。

问题

在此示例中，

;元素不是

的直接子代或孙代：

<div>
    <ul>
        <li>This is red</li>
    </ul>
    <p>This is NOT</p>
    <blockquote><p>This is red but is not supposed to be!</p></blockquote>
</div>

在这种情况下，

元素匹配 *:not(p) 条件，因为它是

的后代，而

其中的元素继承红色。

解决方案

正确的行为是

元素保持其默认颜色。为了实现这一点，规则应该针对所有

。直接元素：

div p { color: black; }

CSS 选择器级别 4 的未来增强

CSS 选择器级别 4 提案增强了 :not() 选择器以接受完整的复杂选择器组合器。这意味着我们将能够编写如下选择器：

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

此扩展语法将允许更精确地定位遥远的后代。

以上是CSS `:not()` 是否选择性地仅针对直系子代和孙代？的详细内容。更多信息请关注PHP中文网其他相关文章！