是:不可能在通配符属性选择器上

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)以及包含选择器的属性.

选择器div.circle:not([class*="circle-"])将仅选择div具有circle类但不包含任何其他类格式的类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>

Answer 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>