纯CSS使用复选框

Question

我正试图通过使用兄弟复选框的选中状态来切换兄弟的CSS。

是否可以从复选框中的已检查伪类中定位页面上任何位置的元素？

我试图避免使用任何JavaScript。

https://codepen.io/dyk3r5/pen/WOmxpV?editors=1111

html,
body {
  height: 100%;
}

.container {
  height: 100%;
  display: flex;
  justify-content: center;
}

label {
  color: #000;
  font-weight: 600;
  height: 25px;
  padding: 5px 10px;
  border-bottom: 2px solid lightgrey;
  margin: 5px 1px;
}

input[type="radio"] {
  display: none;
}

input[type="radio"]:checked + label {
  border-bottom: 2px solid red;
}

input[type="radio"]:checked > div p {
  display: none;
}

<div class="container">
  <div id="new-account">
    <input type="radio" id="opt1" name="radiolist" checked>
    <label for='opt1'>New Account</label>
    <div class="content">
      <p>Lorem Ipsum</p>
    </div>
  </div>

  <div id="existing-account">
    <input type="radio" id="opt2" name="radiolist">
    <label for='opt2'>Existing Account</label>
    <div class="content">
      <p>Lorem Ipsum 2</p>
    </div>
  </div>
</div>

Answer 1

你的错误在于这一行：

input[type="radio"]:checked > div p

您的div元素不是input元素的“直接子元素”。你需要的是“一般兄弟选择器”来解决任何以下div兄弟。

所以它应该是：

input[type="radio"]:checked ~ div p

Answer 2

使用css，如

input[type="radio"]:checked + label + .content p {
  display: none;
}