是否有一个CSS选择器可以选取没有class的元素？

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 { color: gray } 
section.special { color: black } 

但这不是我想要的，因为一旦样式变得复杂起来，在某些情况下很难正确执行“重置”，并且管理起来也不太方便（当然，这个简化示例中并非如此）。

- gorn

---

您可以通过使用 section:nth-child(1) 选择元素，并应用效果。背景颜色为红色。 - Iqbal Pasha

感谢编辑问题。我提到Sass是因为即使只有Sass解决方案，我也很满意。但纯CSS会更好。 - gorn

这与Sass完全无关，因为您编写的任何选择器最终都必须是有效的CSS。标签被删除是有原因的，请不要再添加回去。 - cimmanon

你的想法有些违背了 CSS 中继承和 specificity 的思想。与其将.special的样式视为“重置”，不如将其视为应用于 section 选择器子集的“精修”。对于你的问题所给出的解决方案并不能获得最佳性能，只会使事情更加复杂。（顺便提一下，你的第一个 CSS 示例之所以看起来较短，是因为你省略了: section { color: black; }）。 - Nicolas Le Thierry d'Ennequin

@Nicolas Le Thierry d'Ennequin：省略 section { color: black; } 的原因是因为它本来就不需要 - 可能已经采用了默认值。第二个示例清楚地显示了为所有部分设置颜色，然后必须从可能具有的每个类中删除它的冗余性。我不明白为什么您认为第一个示例会更复杂。至于性能和可维护性之间的选择，您只能选择其中一个。 - BoltClock

我相信你需要这个的原因一定很充分，但我还是要提醒你，不建议这样做，因为它会非常难以维护，而且选择所有没有类的div与仅选择一个div并没有太大区别。如果有人阅读代码，他们会很难理解它，如果你使用它，一定要加上注释。 - Eoin

Answer 1

使用section:not([class])可以选择没有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

- Marvin

---

不匹配 <section class=" ">4</section>，这也可以说是没有类。 - Alohci

你能确认一下 :not([class]) 是否选择具有空类属性的元素吗？ - user663031

逗号可以作为一个有效的类名，因此这种元素并没有没有类，而[class~=","]将匹配它。 - Alohci

有人能告诉我 if :not([class]) 是否标准吗？ - gorn

@Alohci：而且，更重要的是，.\, 也会这样。（更重要的是，因为 [class~=","] 不具有 classname 的语义，尽管空格分隔符规则恰好相同。） - BoltClock