带有属性选择器的CSS not（）似乎不起作用

I have a very simple selector that works, but when adding it to a :not() it no longer seems to recognize it.

我有一个非常简单的选择器,但是当它添加到:not()时,它似乎不再能识别它。

h2:not([random-attribute~="value"] h2){
  color: red;
}
[random-attribute~="value"] h2{
  color: blue;
}

<div class="content">
  <h2>Same valid selector, not working</h2>
  <div random-attribute="value">
      <h2>Valid selector turned blue.</h2>
  </div>
</div>

From what I understand, if you put a valid selector inside the not() you will get any h2 element that is not whatever is inside the parenthesis. This is intuitive.

根据我的理解,如果你在not()中放入一个有效的选择器,你将得到任何不在括号内的h2元素。这很直观。

What isn't intuitive, is that the selector within the not() is valid and works when used alone, but when added to the not() it doesn't seem to work.

不直观的是,not()中的选择器是有效的并且在单独使用时有效,但是当添加到not()时它似乎不起作用。

Is this not a valid way to write this?

这不是写这个的有效方法吗?

4 个解决方案

#1

You need to style all h2 element that are descendants of elements that are not [random-attribute~="value"] then style h2 that are.

你需要设置所有h2元素的样式,这些元素是不是[random-attribute~ =“value”]的元素的后代,然后是样式h2。

It doesn't hurt to qualify the selector with a direct child combinator too.

使用直接子组合器对选择器进行限定也没有什么坏处。

Like so:

*:not([random-attribute~="value"]) > h2 {
  color: red;
}
[random-attribute~="value"] > h2 {
  color: blue;
}

<div class="content">
  <h2>Same valid selector, not working</h2>
  <div random-attribute="value">
    <h2>Valid selector turned blue.</h2>
  </div>
</div>

<h2>some other heading</h2>

#2

You have the syntax wrong for ([random-attribute~="value"] h2) It should just be ([random-attribute~="value"]). See below:

你的语法错误([random-attribute~ =“value”] h2)它应该是([random-attribute~ =“value”])。见下文:

h2:not([random-attribute~="value"]){
  color: red;
}
[random-attribute~="value"] h2{
  color: blue;
}

<div class="content">
  <h2>Same valid selector, not working</h2>
  <div random-attribute="value">
      <h2>Valid selector turned blue.</h2>
  </div>
</div>

You are only supposed to put the given attribute in :not(), not the actual element.

您只应将给定属性放入:not(),而不是实际元素。

#3

In Selectors Level 3, :not only supports a simple selector argument. That will probably change in Selectors Level 4, but browsers don't support it yet.

在选择器级别3中,:不仅支持简单的选择器参数。这可能会在Selectors Level 4中发生变化,但浏览器还不支持它。

The negation pseudo-class, :not(), is a functional pseudo-class taking a selector list as an argument. It represents an element that is not represented by its argument.

否定伪类:not(),是一个以选择器列表作为参数的函数伪类。它表示不由其参数表示的元素。

Note: In Selectors Level 3, only a single simple selector was allowed as the argument to :not().

注意:在选择器级别3中,只允许一个简单选择器作为参数:not()。

Meanwhile, you can rewrite

同时,你可以重写

h2:not([random-attribute~="value"] h2)

:root:not([random-attribute~="value"]) > h2,
:root:not([random-attribute~="value"]) > :not([random-attribute~="value"]) > h2,
:root:not([random-attribute~="value"]) > :not([random-attribute~="value"]) > :not([random-attribute~="value"]) > h2
/* ... repeat until you get deep enough */

However, instead of using complicated selectors like that, in CSS it's more natural to let the cascade pick the most specific styles. As kristóf baján recommends, you don't even need :not:

但是,在CSS中使用级联选择最具体的样式更自然,而不是像CSS那样使用复杂的选择器。正如kristófbaján所建议的,你甚至不需要:不:

h2 {
  /* Default styles */
}
[random-attribute~="value"] h2 {
  /* Overriding styles */
}

#4

I think you are making your job a little too complicated... :) You should just use:

我觉得你的工作太复杂了...... :)你应该只使用:

[random-attribute="value"] h2{
...
}
h2 {
...
}

This should solve your problem. The reason behind the fact that it is not working as YOU would expect it to is that the selector inside the not operator is supposed to extend the clarification of the element and not its parent.

这应该可以解决您的问题。它不能像你预期的那样工作的原因是not运算符内的选择器应该扩展元素的澄清而不是它的父元素。

#1