html - 纯 CSS 改变带有复选框的 div 元素的样式

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