时间戳

首页 > 解决方案 > 选择不是具有特定属性属性的元素的子元素

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

问题描述

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

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

标签： csscss-selectors

解决方案

您可以添加两条规则，一条用于所有A，另一条用于[data-foo] > awith 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>

推荐阅读