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

你可以链：不是选择者。

＆＃13;

.circle {
  width: 20px;
  height: 20px;
  border: 1px solid black;
}

.circle:not(.circle-blue):not(.circle-yellow):not(.circle-red) {
  background: yellow;
}

＆＃13;

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

＆＃13;

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

2 个答案: