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

【问题标题】：Select elements which are not a child of something with a particular attribute property选择不是具有特定属性属性的子元素的元素
【发布时间】：2019-01-11 05:24:23
【问题描述】：

基本上我希望所有“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

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

【问题讨论】：

可能重复：stackoverflow.com/q/52481037/8620333

标签： css css-selectors

【解决方案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>

【讨论】：

我希望避免这种情况，因为我需要退回到继承的样式（它可能不是蓝色的）。此外，“a”并不总是该特定属性 div 的直接后代（它可能是多个 div 深度）。
激烈的竞争呵呵。

【解决方案2】：

试试这个：

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

'大于'> 选择直接子代

【讨论】：

这是正确的。可能值得一提的是，OP 的代码不起作用，因为通用选择器（:not([data-foo]) 和 a 之间的空格字符）使所写的规则适用于具有 任何祖先的 a 标签> 没有data-foo 属性。
对不起，我可能应该进一步说明。我希望 :not 选择沿袭的任何地方，而不仅仅是直接的孩子。
所以：

仍然适用
@nvioli 是的，空间是故意的，任何祖先都是我正在寻找的

【解决方案3】：

简单——首先设置更通用的规则（所有锚点都是红色的），然后做一个特定的例外（除了那些具有'data-foo'属性的祖先）：

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

【讨论】：