代码之家 › 专栏 › 技术社区 › Matt Coady

选择不是具有特定属性属性的某个对象的子级的元素

css-selectors css3 css

1

Matt Coady · 技术社区 · 6 年前

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

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

3 回复 | 直到 6 年前

1

0

matt lohkamp 6 年前

简单-首先设置更一般的规则(所有锚都是红色的),然后进行特定的异常(具有“data foo”属性的祖先除外):

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

2

Niloct 6 年前

你可以添加两个规则,一个适用于所有人 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>

3

1

luenib 6 年前

试试这个:

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

'大于'>选择直接子级