角2で "mark-as-"で始まるすべてのクラスにスタイルを設定してください

Question

"mark-as"で始まるクラス名を持つ要素が使用されているかどうかにかかわらず、 （例えば、「マーク・アンド・カー」、「マーク・アズ・キャット」など）は黄色の背景になります。

私は、コンポーネントのCSSファイルに以下を追加することができます。

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

しかし、私は要素のクラス名を変更することなく、コンポーネントのロジックで動的にそれを無効/有効にする方法を知っていただきたいと思います。

Answer 1

以下のCSSのアプローチを使用できます。

cssセレクタの詳細についてはcss selectorsをご覧ください。

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