是：不可能在通配符屬性選擇器上

Question

是否有可能在通配符屬性選擇器上使用:not選擇器？

例子：

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

我想僅解決類「圓圈」的股利，而不是與類的div「圓紅」，「圓藍」，「圓黃」

Answer 1

您可以使用否定選擇器（:not）以及屬性包含選擇器用於此目的。

選擇器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>

Answer 2

你可以鏈：不選擇。

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