Question

所以我通过实现如下所示的复选框来控制事件：

＆＃13;

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

＆＃13;

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

＆＃13;

CSS用于引导用户完成包含多个步骤的表单。我遇到的问题是，我希望表格同时选中复选框并选中其中一个单选按钮。是否有某种方法可以合并逻辑＆amp;＆amp;＆amp;＆＃39;在我的样式表中强制执行此操作？

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

这绝对可行，您甚至不必更改HTML！

只需将 sibling selectors (~) 链接在一起，然后检查#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>

希望这有帮助！

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

2 个答案: