如何定位空class？实现带class的p元素绿背景，其余设红背景

嘿，这个问题我之前也碰到过！核心问题在于你用的:not([class])选择器只会匹配完全没有class属性的<p>元素，而class=""这种是有class属性但值为空的情况，自然就被漏掉了。

解决方案 #

你只需要把空class的情况也加入到红色背景的选择器里就行，这里有两种直观的写法：

写法一：先兜底再覆盖

先给#test里所有的<p>设置红色背景，再给带非空class的<p>覆盖成绿色：

#test p {
  background: red;
  color: #fff;
}
#test p[class]:not([class=""]) {
  background: green;
  color: initial; /* 可选：恢复默认文字颜色，如果你不需要白色的话 */
}

写法二：直接指定需要变红的两种情况

在你原有代码的基础上，补充空class的选择器：

p { background: green; }
/* 同时匹配「无class属性」和「class属性为空」的<p> */
#test p:not([class]), #test p[class=""] {
  background: red;
  color: #fff;
}

测试效果 #

用上面任意一种写法，你的HTML结构都会呈现预期效果：

• 带非空class（比如class="abc"）的<p>：绿色背景
• 无class或class=""的<p>：红色背景+白色文字

内容的提问来源于stack exchange，提问作者Suresh Ponnukalai