Question

基本上，我希望所有“ a”元素都是红色的，除非它们是属性为“ data-foo”的元素的后代。

此html：

<div data-foo="whatever">
  <div>
    ... more descendants 
       <a href="#">I should be default color</a>
  </div>
</div>

<a href="#">I should be red</a>

使用此CSS：

:not([data-foo]) a {
  color: red;
}

在此示例中，仍然选择两个“ a”元素。我还尝试了以下方法：

div:not([data-foo]) a
*:not([data-foo]) a
div:not([data-foo]) a
*:not(div[data-foo]) a

但是我要么什么都没选择，要么全部都选择了。这是一个可能的选择吗？

Answer 1

您可以添加两条规则，一条用于所有A，另一条用于[data-foo] > a和color: unset;（或您想要的特定颜色）：

A {
    color: red;
}

[data-foo]  A {
    color: inherited; 
}

<div data-foo="whatever">
  <a href="#">I should be default color</a>
</div>

<a href="#">I should be red</a>

Answer 2

尝试一下：

:not([data-foo]) > a {
  color: red;
}

“大于”>选择直系子孙

Answer 3

简单-首先设置更通用的规则（所有锚点都是红色的），然后进行特定的例外处理（具有“ data-foo”属性的祖先的例外）：

a { color:red; }
[data-foo] a { color:inherit; }

选择不是具有特定属性属性的事物的子元素

3 个答案: