使用CSS的复选框的逻辑AND？

Question

所以我通过实现类似的复选框来控制使用CSS的事件:

.box {
    display: none;
  }

  #step-1a:checked ~ .box {
    display: block;
  }

<input name="step1-check" id="step-1a" type="checkbox">
<input name="step1-radio" id="step-1b" type="radio">
<input name="step1-radio" id="step-1c" type="radio">
<div class="box">Hello world!</div>

CSS用于引导用户完成具有多个步骤的表单.我遇到的问题是,我希望表单要求选中复选框并选中其中一个单选按钮.有没有办法在我的样式表中加入逻辑'&&'来强制执行此操作？

Answer 1

将元素放入父包装器中,并在复选框和单选按钮以及通用兄弟组合器上使用:checked伪选器,以确保它们都与.box div一起被拾取.

.box {
  display: none;
}

.wrapper input[type= 'checkbox']:checked  ~ input[type= 'radio']:checked ~ .box {
  display: block;
}

<div class="wrapper">
  <input name="step1-check" id="step-1a" type="checkbox">
  <input name="step1-radio" id="step-1b" type="radio">
  <input name="step1-radio" id="step-1c" type="radio">
  <div class="box">test</div>
</div>

Answer 2

这绝对是可能的,您甚至不必更改HTML!

只需将同级选择器(~)连接在一起,然后检查#step-1a:checked后面input是同时检查过的同级无线电input[type="radio"]:checked.

这可以在以下内容中看到:

.box {
  display: none;
}

#step-1a:checked ~ input[type="radio"]:checked ~ .box {
  display: block;
}

<input name="step1-check" id="step-1a" type="checkbox">
<input name="step1-radio" id="step-1b" type="radio">
<input name="step1-radio" id="step-1c" type="radio">
<div class="box">Output</div>

希望这可以帮助!