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

2022-01-10 00:00:00 css-selectors css

没有任何类的元素是否有 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

相关文章