有没有任何类的元素的CSS选择器吗? [英] Is there a CSS selector for element without any class?

问题描述

是否有没有任何类的CSS选择器?例如HTML

Is there a CSS selector for element without any class? For example in HTML

<section>Section A</section>
<section class="special">Section B</section>
<section class="">Section C</section>

我想选择A部分(或者说A部分和C部分，都没关系)，

I would like to select Section A (or maybe Section A and Section C, it does not matter that much), by saying something like

section:not(.*) { color: gray } 

我知道我可以在所有特定类中将其定义为section并将其重置回

I understand that I could define it to section and reset it back in all particular classes, like in

section { color: gray } 
section.special { color: black } 

但这不是我想要的，因为一旦样式变得复杂，它就不是很容易管理，并且在某些情况下很难正确地进行重置"(当然，在此简化示例中不是这样).

but this is not what I want, because it is not very manageable once the styles get complex and in some cases it is hard to do the "reset" properly (of course not in this simplified example).

推荐答案

使用section:not([class])可以选择没有class属性的每个部分.不幸的是，它不会选择那些类属性值为空的部分.因此，此外，我们必须排除以下部分:

With section:not([class]) you select every section without the class attribute. Unfortunately, it won't select those sections with an empty class attribute value. So in addition, we have to exclude these sections:

section:not([class]) { /* every section without class - but won't select Section C */
  color: red;
}

section[class=""] { /* selects only Section C */
  font-weight: bold;
}

<section>Section A</section>
<section class="special">Section B</section>
<section class="">Section C</section>

• CSS属性选择器， :not

• CSS attribute selector, browser support
• :not

这篇关于有没有任何类的元素的CSS选择器吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！