Question

不使用JavaScript，我希望只有在选中两个复选框时才会发生。像

这样的东西

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

的

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

这显然不起作用。有没有办法在不使用JS的情况下检测这两个复选框？

Answer 1

是的，这是可能的。

如果选中第一个复选框，请选中第二个复选框，然后从那里选择p元素：

＆＃13;

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

＆＃13;

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

＆＃13;

当然，如果您事先不知道订单，也可以推广选择器：

＆＃13;

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

＆＃13;

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

＆＃13;

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;
}

检测多个已选中的复选框

3 个答案: