CSS使用id与class时波浪号~兄弟选择器样式不生效问题

CSS的通用兄弟选择器~的匹配规则有两个硬性要求，你的代码均未满足：

• 必须匹配同一父元素下、在目标元素（这里是#header__menu）后面出现的同级元素，无法选中位于目标元素前面的兄弟节点
• 你的代码里，class为header__button的元素是#header__menu（checkbox输入框）的前一个兄弟节点，位置在它前面，完全不在~选择器的匹配范围内

额外注意：你给外层div设置的class是header__menu，内部checkbox的id是header__menu，同名的class和id很容易在写选择器时搞混元素层级。

方案1：调整HTML元素顺序（兼容性最好，全浏览器支持） #

把id为header__menu的checkbox移到.header__button元素前面，原有CSS代码无需修改即可生效：

<div class="header__menu">
  <!-- 将checkbox移到按钮节点前面 -->
  <input type="checkbox" name="" id="header__menu">
  <div class="header__button">
    <div class="header__button-1 header__line"></div>
    <div class="header__button-2 header__line"></div>
    <div class="header__button-3 header__line"></div>
  </div>
</div>

原有CSS代码保持不变即可：

#header__menu~.header__button {
  background-color: red;
}

方案2：不改动HTML结构，用:has()选择器（适配现代浏览器） #

如果不想调整元素顺序，可以用父级:has()选择器实现匹配，无需挪动HTML节点位置：

/* 当.header__menu容器内存在#header__menu时，选中内部的.header__button */
.header__menu:has(#header__menu) .header__button {
  background-color: red;
}

内容的提问来源于stack exchange，提问作者rllynotfox