與模式

Question

定義CSS選擇器我有以下要素：

<div class="grid"> 
    <div class="col-1">First Col</div> 
    <div class="col-center-2">Second Col</div> 
    <div class="col-center-3">third Col</div> 
    <div class="col-3">third Col</div> 
</div> 

我想補充類具有對"-center-"字的所有元素。我如何定義這個選擇器？

Answer 1

您可以使用[attr*=value]屬性選擇

div[class*="-center-"] { 
 
    color: red; 
 
}

<div class="grid"> 
 
    <div class="col-1">First Col</div> 
 
    <div class="col-center-2">Second Col</div> 
 
    <div class="col-center-3">third Col</div> 
 
    <div class="col-3">third Col</div> 
 
</div>