將樣式設置爲以「mark-as-」開頭的所有類動態角度2

Question

我希望能夠在我的組件中動態設置，無論類名稱以「mark-as」開頭的元素， （例如「mark-as-car」，「mark-as-cat」）會有黃色背景。

我可以添加以下到組件的css文件：

*[class^="mark-as-"] { 
background: #ffff00; 
} 

但我想知道如何啓用/在組件邏輯動態禁用它不改變元素的類名稱。

Answer 1

你可以使用下面的css方法。

您可以訪問css selectors瞭解更多關於css選擇器的知識。

[class*="mark-as-"] { 
background: #ffff00; 
} 

下面的一個例子更容易理解。

.mark-as-red { 
 
    color:#fff; 
 
} 
 

 
.yellow-mark { 
 
    color:#fff; 
 
} 
 

 

 
p[class*="-as-red"] { 
 
background: #999; 
 
} 
 

 
p[class^="yellow-"] { 
 
background: yellow; 
 
}

<p class="mark-as-red "> 
 
HELLO 
 
</p> 
 

 
<p class="yellow-mark "> 
 
HELLO 
 
</p>