CSS :checked ~ 选择器详解：如何为选中元素的兄弟元素添加样式

':checked ~' 是 CSS 中用于给被选中元素的兄弟元素应用样式的选择器。

代码解析：

• ':checked' - 这是一个 CSS 伪类选择器，用于选择被选中的元素。通常与复选框或单选按钮一起使用。
• '~' - 这是 CSS 通用兄弟选择器，用于选择指定元素后面的所有兄弟元素。
• '{ }' - 这是 CSS 规则的起始和结束标记。
• 'background-color: red;' - 这是一个 CSS 属性，用于设置元素的背景颜色为红色。

示例：

<input type='checkbox' id='checkbox'>
<label for='checkbox'>选择我</label>
<p>这段文字将变红。</p>

#checkbox:checked ~ p {
  background-color: red;
}

解释：

这段 CSS 代码表示，当 id 为 'checkbox' 的复选框被选中时，其后面的所有兄弟元素（这里指 <p> 标签）的背景颜色将被设置为红色。

总结：

':checked ~' 选择器可以方便地为选中元素的兄弟元素设置样式，增强用户交互体验。例如，你可以使用它来创建动态显示或隐藏内容的效果。