是否：不可能在通配符属性选择器上答案

【问题标题】：Is :not possible on a wildcard attribute selector是否：不可能在通配符属性选择器上
【发布时间】：2016-05-31 20:37:34
【问题描述】：

是否可以在通配符属性选择器上使用:not 选择器？

例子：

<div class="circle circle-red"></div>
<div class="circle circle-blue"></div>
<div class="circle circle-yellow"></div>
<div class="circle"></div>

我只想处理类为 'circle' 的 div，而不是类为 'circle-red'、'circle-blue'、'circle-yellow' 的 div

【问题讨论】：

这两个答案对您解决问题有帮助吗？如果是，请考虑将其标记为已接受（单击与最有帮助的答案相对应的投票按钮下方的空心对勾）。这通常是在 SO 中将问题标记为“已解决”的方法 :)

标签： css css-selectors

【解决方案1】：

为此，您可以使用否定选择器 (:not) 和属性包含选择器。

选择器div.circle:not([class*="circle-"]) 将仅选择具有circle 类但不包含任何其他格式为circle- 的类的div。

div.circle:not([class*="circle-"]) {
  color: green;
}

<div class="circle circle-red">Red</div>
<div class="circle circle-blue">Blue</div>
<div class="circle circle-yellow">Yellow</div>
<div class="circle">None</div>
<div class="circle-orange">Orange</div>

【讨论】：

【解决方案2】：

您可以链接 :not 选择器。

.circle {
  width: 20px;
  height: 20px;
  border: 1px solid black;
}

.circle:not(.circle-blue):not(.circle-yellow):not(.circle-red) {
  background: yellow;
}

<div class="circle circle-red"></div>
<div class="circle circle-blue"></div>
<div class="circle circle-yellow"></div>
<div class="circle"></div>

【讨论】：