1

私のhtmlマークアップは次のようになります..

<div class="siteCheckboxes">
   <label for="filterAll">
      All <input name="filterAll" type="checkbox" id="filterAll" checked="checked"  />
   </label>
</div>

チェックボックスがある親ラベルの色を変更する方法を知る必要があります。やってみました...

input[type="checkbox"]:checked > label{ background-color:#F00; }

親ラベルの背景色を変更しますが、これは機能しません。これを行う正しい方法は何ですか？

4

3 に答える 3

3

CSS は、子に基づいて親を変更できません。アクセスは一方通行parent -> childです。

-編集：

Little Big Bot がコメントで指摘しているように、兄弟セレクター (+および~) が利用可能ですが、まだ完全にはサポートされていません。また、あなたが述べているように要素をネストしている場合、それらは役に立ちません。いずれにせよ、ここでは次のとおりです。

http://reference.sitepoint.com/css/adjacentsiblingselector

http://reference.sitepoint.com/css/generalsiblingselector

于 2012-09-28T21:59:13.300 に答える
2

これは、厳密に CSS で行うことはできません。CSS (CSS 3 でさえも) には「親」セレクターがありません。

詳細: http://css-tricks.com/parent-selectors-in-css/

于 2012-09-28T22:01:10.180 に答える
1

inputおよび要素が隣接する兄弟であり、ネストされておらず、ラベルがチェックボックスの後に表示されるマークアップを使用する場合、純粋な CSS でこれを行うことができlabelます (これははるかに一般的な使用法であり、したがって使いやすさが向上します)。

<input name="filterAll" id="filterall" type="checkbox" id="filterAll" 
       checked="checked"  />
<label for="filterAll">All</label>

次に、隣接する兄弟セレクターを使用できます+。

input[type="checkbox"]:checked + label { background-color:#F00; }
于 2012-09-29T05:40:20.123 に答える