CSS :not() 是否选择性地排除远亲？

距离后代和 CSS :not() 选择器

CSS3 :not() 伪类旨在否定特定选择器匹配。它已在浏览器中广泛实现。然而，围绕此选择器的一个常见误解是它对遥远后代的适用性。

虽然 :not() 成功地否定了直接子元素的匹配，但对于更遥远的后代，它的行为并不符合预期。如提供的示例所示：

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

在此片段中，

元素仍然从其父级

继承红色，即使它不是

的直接后代。发生这种情况是因为 :not() 仅直接否定该元素的匹配，而不是其后代。

CSS3 和 CSS 选择器级别 4 中的 :not() 文档没有明确解决此行为。不过，已经证实这种行为是故意的，选择器并不意味着支持孙子匹配。

解决方案

达到预期的结果从 :not() 匹配中排除远亲后代，必须使用不同的方法。一种常见的方法是为要排除的特定元素指定颜色，覆盖任何继承的值：

div {
  color: red;
}

div p {
  color: black;
}

CSS 选择器级别 4 增强

CSS 选择器第 4 级提出了对 :not() 选择器的增强，允许在其中使用更复杂的选择器。此更改将使以下语法能够正确地否定后代：

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

虽然此增强功能尚未在浏览器中广泛实现，但它为使用 :not() 匹配和否定远距离后代提供了一个有前景的解决方案。

以上是CSS :not() 是否选择性地排除远亲？的详细内容。更多信息请关注PHP中文网其他相关文章！