我有一个非常简单的选择器可以工作,但是当将它添加到 :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>
据我了解,如果您在 not()
中放置一个有效的选择器,您将得到任何 h2
元素,该元素 not 无论如何在括号内。这是直观的。
不直观的是,not()
中的选择器在单独使用时有效且有效,但当添加到 not()
时它不起作用' 似乎工作。
这不是一个有效的写法吗?
最佳答案
您需要设置所有 h2
元素的样式,这些元素是不是 [random-attribute~="value"]
的元素的后代,然后设置 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>
<h2>some other heading</h2>
关于html - 带有属性选择器的 CSS not() 似乎不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40115076/