无JS及HTML修改权限时，如何基于类名关联修改CSS样式？

核心是利用CSS的兄弟选择器或**:has() 选择器**，在不修改HTML、不使用JS的前提下，关联带red/green类的元素和外部的.dropdown元素，实现条件式样式修改。

场景1：带颜色类的元素与.dropdown是同级（DOM顺序在前） #

如果.dropdown在带颜色类的元素之后，可以用通用兄弟选择器~（匹配所有后续同级元素）或相邻兄弟选择器+（仅匹配紧接的下一个同级元素）。

HTML示例 #

<div class="page-container">
  <!-- 网站原本会添加red/green类的容器 -->
  <div class="color-target red">
    <p>内部变色内容</p>
  </div>
  
  <!-- 需要联动样式的dropdown，在color-target之外 -->
  <div class="dropdown">
    <button>下拉菜单</button>
    <ul>
      <li>选项A</li>
      <li>选项B</li>
    </ul>
  </div>
</div>

CSS示例 #

/* 默认dropdown样式 */
.dropdown {
  background-color: #ffffff;
  border: 1px solid #ddd;
  color: #333;
}

/* 当color-target有red类时，修改dropdown样式 */
.color-target.red ~ .dropdown {
  background-color: #ffe6e6;
  border-color: #ff4d4d;
  color: #cc0000;
}

/* 当color-target有green类时，修改dropdown样式 */
.color-target.green ~ .dropdown {
  background-color: #e6f9e6;
  border-color: #4dcc4d;
  color: #006600;
}

场景2：带颜色类的元素与.dropdown是同级（DOM顺序在后） #

如果.dropdown在带颜色类的元素之前，CSS原生的兄弟选择器无法反向匹配，此时可以用:has()选择器（需现代浏览器支持），通过共同父容器来关联。

HTML示例 #

<div class="page-container">
  <!-- dropdown在color-target之前 -->
  <div class="dropdown">
    <button>下拉菜单</button>
    <ul>
      <li>选项A</li>
      <li>选项B</li>
    </ul>
  </div>
  
  <div class="color-target green">
    <p>内部变色内容</p>
  </div>
</div>

CSS示例 #

/* 默认dropdown样式 */
.dropdown {
  background-color: #ffffff;
  border: 1px solid #ddd;
  color: #333;
}

/* 父容器包含带red类的color-target时，修改dropdown */
.page-container:has(.color-target.red) .dropdown {
  background-color: #ffe6e6;
  border-color: #ff4d4d;
  color: #cc0000;
}

/* 父容器包含带green类的color-target时，修改dropdown */
.page-container:has(.color-target.green) .dropdown {
  background-color: #e6f9e6;
  border-color: #4dcc4d;
  color: #006600;
}

注意事项 #

• 兄弟选择器~/+仅能匹配DOM顺序在目标元素之后的元素，无法反向匹配；
• :has()选择器目前支持Chrome 105+、Firefox 121+、Safari 15.4+，如果需要兼容旧版浏览器，优先采用场景1的DOM结构和兄弟选择器方案；
• 确保带颜色类的元素和.dropdown有明确的DOM层级关联（同级或共同父容器），这是CSS能实现联动的前提。

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