css - 是:not possible on a wildcard attribute selector

Question

是否可以在通配符属性选择器上使用 :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

Answer 1

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

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

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>