複数のチェックボックスをチェックする

Question

JavaScriptを使用しないと、2つのチェックボックスがオンになっている場合にのみ何かが発生します。だから、

明らかに動作しません

<input id="one" type="checkbox" name="check"><label for="one">One</label> 
<input id="two" type="checkbox" name="check"><label for="two">Two</label> 
<p>Thing</p> 

ため

#one:checked && #two:checked ~ p { 
    color: red; 
} 

のようなもの。 JSを使用せずに両方のチェックボックスを検出する方法はありますか？

Answer 1

はい、可能です。

最初のものがチェックされている場合は、2番目のチェックボックスを選択して、そこからp要素を選択します。もちろん

#one:checked ~ #two:checked ~ p { 
 
    color: #f00; 
 
}

<input id="one" type="checkbox" name="check"><label for="one">One</label> 
 
<input id="two" type="checkbox" name="check"><label for="two">Two</label> 
 
<p>Thing</p>

をそうでない場合は、また、セレクタを一般化可能性事前に順序を知っている：

input:checked ~ input:checked ~ p { 
 
    color: #f00; 
 
}

<input id="one" type="checkbox" name="check"><label for="one">One</label> 
 
<input id="two" type="checkbox" name="check"><label for="two">Two</label> 
 
<p>Thing</p>

Answer 2

あなたが近くにあったが、何が必要です：

#one:checked ~ #two:checked ~ p { 
    color: red; 
} 

Answer 3

あなただけ

#one:checked ~ #two:checked ~ p { 
    color: red; 
} 

へ

#one:checked && #two:checked ~ p { 
    color: red; 
} 

を変更する必要があります