マウスイベントやブール値に基づいてラベルの色を変更します

Question

現在、値に基づいてラベルの背景色を変更しようとしています。同時に、ユーザーがラベルをクリックしたり、ラベルの上にカーソルを置いたりすると、ラベルの色を変更したいと考えています。現在、私はクリックとホバーを（別々のCSSクラスを使って）行っていますが、値の部分も同様に動作させる方法がわかりません。

TypeScriptファイルで真に設定されている単純なブール値（ 'displayValueTrueClass'）があります。その値がtrueの場合、CSSクラスを 'valueTrue'クラスに変更します。ここで

は私のHTMLです：

<section class="ac-container"> 
<div> 
    <input id="id-1" name="id-1" type="checkbox" /> 
    <label [ngClass]="{'valueTrue': displayValueTrueClass}" for="id-1">Panel Name Goes Here</label> 
</div> 

とここに私のCSSです：

.ac-container { 
    width: 100%; 
    margin: 10px auto 30px auto; 
} 

.valueTrue { 
    background-color: #060bf7; 
    color: #ffffff; 
} 

.ac-container label { 
    padding: 4px 20px; 
    position: relative; 
    display: block; 
    height: 25px; 
    cursor: pointer; 
    color: #ffffff; 
    font-size: 12px; 
    background: #404040; 
} 

.ac-container label:hover { 
    background-color: #000000; 
} 

.ac-container input:checked + label, 
.ac-container input:checked + label:hover{ 
    background-color: #4ed017; 
    color: #ffffff; 
} 

.ac-container label-broken { 
    background-color: #ff0000; 
    color: #ffffff; 
} 

マイtypescriptですがtrueにブールセットを持っています

displayValueTrueClass: boolean = true; 

I ngClassの行が適切なCSSクラスを使用して表示されますが、他の.ac-container：ラベルクラスをすべて削除した場合にのみ、valueTrueクラスより優先されるようです。 私はCSSでHTMLを構築するのはかなり新しいです。私は 'ngClass'を正しく使用していると確信しているので、その値が真のときに適切なクラスが適用されない理由がわかりません。

Answer 1

上記のように、CSSセレクタ.ac-container labelは、.trueValueセレクタよりも高い優先度を持ちます。あなたはそれがより具体的なことによって、.trueValueセレクタに高い優先順位を与えることができます：

.ac-container label.trueValue 

を

trueValueクラスが適用されるときには、デフォルトのラベルのセレクタをオーバーライドします。

CSSの詳細については、this articleを参照してください。