<details>元素内勾选复选框后，CSS兄弟选择器无法显示对应标签的问题

嘿，我一眼就瞅到问题所在啦！你的CSS兄弟选择器逻辑没问题，但DOM层级不对导致它没法生效~

你看哦，原来的代码里，复选框<input name='countdown'>是放在<summary>标签内部的，而要显示的<label for='timer'>是直接挂在<details>下面的——这俩元素根本不是同一个父级下的兄弟节点，CSS里的~相邻兄弟选择器只能选中同一父元素里，当前元素之后的兄弟元素，自然就选不到目标标签啦。

修复方案（纯CSS实现） #

只需要调整一下DOM结构，把复选框从<summary>里移出来，和目标标签放在同一个父级（也就是<details>下面）就好啦。如果想让复选框显示在summary的文字旁边，可以把summary内容和复选框整合，示例如下：

修复后的HTML #

<details>
  <summary>更多选项</summary>
  <!-- 把复选框移到details下，和label成为同级兄弟 -->
  <label>
    <input type="checkbox" name="countdown">
    开启倒计时
  </label>
  <!-- 目标标签现在和复选框是同一父级，选择器能生效了 -->
  <label for="timer">倒计时时长：</label>
  <input id="timer" type="number" value="5">
</details>

对应的CSS（原有代码微调即可） #

details {
  display: flex;
  flex-direction: column;
  width: 100%;
  font-size: 0.8em;
  column-gap: 5px;
}

summary {
  margin-bottom: 10px;
  cursor: pointer;
}

label {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 10px;
}

#timer {
  width: 4ch;
  text-align: center;
  outline: none;
}

/* 默认隐藏倒计时相关元素 */
label[for='timer'], #timer {
  display: none;
}

/* 现在复选框和目标元素是兄弟，选择器正常生效 */
input[name='countdown']:checked ~ label[for='timer'],
input[name='countdown']:checked ~ #timer {
  display: flex;
}

这样调整之后，勾选“开启倒计时”的复选框，对应的倒计时标签和输入框就能正常显示啦~

备注：内容来源于stack exchange，提问作者Dzadafa