没有任何类的元素是否有CSS选择器？

Question

没有任何类的元素是否有CSS选择器？例如在HTML中

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

我想通过说出类似的东西来选择A部分(或者可能是A部分和C部分,这并不重要)

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

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

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

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

Answer 1

随着section:not([class])您选择不class属性的每个部分.不幸的是,它不会选择具有空类属性值的那些部分.所以另外,我们必须排除这些部分:

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