html - CSS セレクターと HTML

Question

以下は私のCSSとHTMLコードです。

とタグhiddenの間にフィールドがある場合、指定された CSS セレクターは適用されませんINPUTSPAN

CSS

input[type="checkbox"] + .lbl:before {
    background-color: #FAFAFA;
    border: 1px solid #CCCCCC;
}

CSSの作業

<label>
<input name="SMS" type="checkbox" />
<span class="lbl"> choice 2</span>
</label>

CSS が適用されていません

<label>
<input name="SMS" type="checkbox" />
<input type="hidden" value="false" name="SMS">
<span class="lbl"> choice 2</span>
</label>

両方のケースをサポートするために、新しい CSS セレクターの変更を変更または追加するにはどうすればよいですか?

注:フィールドHiddenはフレームワークによって自動的に生成されASP.Net MVCたものであり、他の場所に配置するためのコントロールはありません。

score 3 · Accepted Answer

は+、要素がチェックボックスの直後に配置されることを示します。

>親を示すに変更できます。

input[type="checkbox"] > .lbl:before {
    background-color: #FAFAFA;
    border: 1px solid #CCCCCC;
}

注: 新しい要素を追加し、divそれを親要素として使用しました。

div > .lbl {
    background-color: #FAFAFA;
    border: 1px solid #CCCCCC;
}

IDを指定して単一のセレクターを使用し、spanそれに基づいて選択することもできます。

score 1 · Accepted Answer

ここで考えられる唯一の問題が、チェックボックスとスパンの間の非表示の入力フィールドである場合は、セレクターでそれを参照できるはずです。

input[type="checkbox"] + input[type="hidden"] + .lbl:before {
    ....
}

または、隠しフィールドがある場合とない場合は、両方のオプションを許可する必要があります。

input[type="checkbox"] + .lbl:before, input[type="checkbox"] + input[type="hidden"] + .lbl:before {
    ....
}

2 つの間にさらに要素が存在する可能性があり、それらが何であるかわからない場合は、+セレクターをセレクターに交換する必要があります~。これにより、隣接する兄弟ではなく兄弟が選択されます。

input[type="checkbox"] ~ .lbl:before {
    ....
}

このオプションは最も単純かもしれませんが、元の+セレクターでは選択されなかったものを選択する可能性があるという注意点があります。

それが役立つことを願っています。

score 1 · Accepted Answer

別の要素の直後にあるとは限らない兄弟をスタイルしようとしている場合は、一般的な兄弟コンビネータを使用できます。~

だからあなたの場合

input[type="checkbox"] ~ .lbl:before {
    background-color: #FAFAFA;
    border: 1px solid #CCCCCC;
}

両方のシナリオで機能します

3 に答える 3