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

【问题标题】：Is there a CSS selector for element without any class?没有任何类的元素是否有 CSS 选择器？
【发布时间】：2016-07-21 05:03:06
【问题描述】：

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

但这不是我想要的，因为一旦样式变得复杂，它就不太容易管理，并且在某些情况下很难正确地“重置”（当然不是在这个简化的示例中）。

【问题讨论】：

您可以按部分选择元素：nth-child(1){ background : red;} 并应用效果
感谢您编辑问题。我提到了 sass，因为即使只有 sass 的解决方案我也很高兴。然而，纯 css 会更好。
这与 Sass 完全没有关系，因为无论你写什么选择器必须最后都是有效的 CSS。标签被删除是有原因的。不要重新添加。
您的想法与 CSS 中的继承和特殊性的想法有些背道而驰。与其将.special 的样式视为“重置”，不如将其视为应用于section 选择的子集的“改进”。为您的问题提供的解决方案不会为您提供最佳性能，并且会使事情变得更加复杂。（顺便说一句，您的第一个 CSS 示例看起来更短，因为您省略了：section { color: black; }）。
@Nicolas Le Thierry d'Ennequin：section { color: black; } 被省略的原因是因为一开始就不需要它——大概它已经采用了默认值。第二个示例清楚地显示了为所有部分设置颜色然后必须从这些部分可能具有的每个可能的类中删除它的冗余。我不明白你为什么认为第一个例子会更复杂。至于性能，在这和可维护性之间，你只能选择一个。

标签： css css-selectors

【解决方案1】：

使用section:not([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>

进一步阅读

【讨论】：

都不匹配<section class=" ">4</section>，也可以说没有类。
或 class=" , , , , " ，或者只是任何没有正确类的 class 值。
您能确认:not([class]) 选择了具有空类属性的元素吗？
@Senthe - 逗号是有效的类名。所以这样的元素没有类，[class~=","] 会匹配它。
@Alohci：更重要的是，.\, 也是如此。（更重要的是，因为[class~=","] 不带有类名语义，尽管空格分隔符的规则恰好是相同的。）