检测多个选中的复选框

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 元素：

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