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中文网其他相关文章！