选择没有任何类的元素

Question

我需要通过 jQuery 选择器找到页面中没有类的所有跨度。

例子：

<span class='Cool'>do not found me</span>
<span>me, me, take me please!!!</span>

Answer 1

使用 :not() 和 属性非选择器[att!=val]过滤掉带有非-的元素空 class 属性：

$('span:not([class!=""])')

jsFiddle 预览

但请注意 [att !=val] 是一个非标准 jQuery 选择器，这意味着该选择器不能在 CSS 中使用，也不能与 document.querySelectorAll() 一起使用。如果您像我一样，并且坚持遵循标准，因此希望尽可能避免非标准 jQuery 选择器，则以下是直接等效项：

$('span:not([class]), span[class=""]')

这与

• 具有以下内容的 span 元素 匹配： 没有 class 属性，以及
• 确实有 class 属性的 span 元素，但是仅当属性值为空时。

不过，在大多数情况下，您应该能够只使用第一部分：

$('span:not([class])')

您通常只会在负责输出它的应用程序或开发人员生成的标记中找到空的 class 属性谁不注意。

Answer 2

请参阅此答案仅使用CSS 我可以编写一个 CSS 选择器来选择不具有特定类的元素吗？

:not([class])

实际上，这将选择任何没有应用 .class 的元素。

我收集了 jsfiddle 演示

html

<h2 class="fake-class">fake-class will be green</h2>
<h2 class="">empty class SHOULD be white</h2>
<h2>no class should be red</h2>
<h2 class="fake-clas2s">fake-class2 SHOULD be white</h2>
<h2 class="">empty class2 SHOULD be white</h2>
<h2>no class2 SHOULD be red</h2>

css

h2 {color:#fff}
:not([class]) {color:red;background-color:blue}
.fake-class {color:green}