如何通过CSS选择器实现：存在inertia-link-active时修改指定标签文本色

• 需求：当页面内的<a>标签带有inertia-link-active类时，将.sidebar-section-label和.sidebar-group-label元素的文本颜色设置为#677487。
• 问题：尝试使用CSS选择器.sidebar-group-button .sidebar-group-label:has(~ a.inertia-link-active)未生效，求正确的CSS实现方案。

原始HTML结构 #

<!DOCTYPE html>
<html>

<head>
  <style>
    .sidebar-group-button .sidebar-group-label:has(~ a.inertia-link-active) {
      color: #677487 !important;
    }
  </style>
</head>

<body>
  <div class="sidebar-section">
    <button aria-expanded="true" class="sidebar-section-title">
      <span class="sidebar-label">
        <span class="sidebar-icon">
          <!-- Your SVG icon code here -->
        </span>
        <span class="sidebar-section-label">Resources</span> <!-- 需要设置文本颜色 #677487 -->
      </span>
    </button>
    <div class="mt-1 space-y-1">
      <div class="sidebar-group">
        <button class="sidebar-group-button mt-3">
          <h4 class="sidebar-group-title">
            <span class="sidebar-group-icon"></span>
            <span class="sidebar-group-label">Access Controls</span> <!-- 需要设置文本颜色 #677487 -->
          </h4>
        </button>
        <div class="sidebar-item">
          <a class="sidebar-item-title relative inertia-link-active" href="/admin/resources/permissions">
            <span class="sidebar-item-icon"></span> <!-- 当该a标签带有inertia-link-active时 -->
            <span class="sidebar-item-label flex items-center">Permissions <!-- --></span>
          </a>
        </div>
        <div class="sidebar-item">
          <a class="sidebar-item-title relative" href="/admin/resources/roles">
            <span class="sidebar-item-icon"></span>
            <span class="sidebar-item-label flex items-center">Roles <!-- --></span>
          </a>
        </div>
        <div class="sidebar-item">
          <a class="sidebar-item-title relative" href="/admin/resources/users">
            <span class="sidebar-item-icon"></span>
            <span class="sidebar-item-label flex items-center">Users <!-- --></span>
          </a>
        </div>
        <!-- -->
      </div>
    </div>
  </div>
</body>

</html>

之前的选择器失效，是因为:has()里的兄弟选择器~只能匹配同一父元素下的后续兄弟，但.sidebar-group-label和带inertia-link-active的<a>不在同一个父节点里——前者在.sidebar-group-button内部，后者在.sidebar-item中，二者共享祖父节点.sidebar-group。

正确的做法是利用:has()检测父容器是否包含激活链接，再定位目标标签：

/* 给包含激活链接的侧边栏分组下的标签设置颜色 */
.sidebar-group:has(.inertia-link-active) .sidebar-group-label {
  color: #677487;
}

/* 给包含激活链接的侧边栏区块下的标签设置颜色 */
.sidebar-section:has(.inertia-link-active) .sidebar-section-label {
  color: #677487;
}

逻辑说明 #

1. .sidebar-group:has(.inertia-link-active)：选中所有后代中存在.inertia-link-active元素的.sidebar-group容器。
2. 通过后代选择器.sidebar-group-label，定位到该容器内的目标标签，设置颜色样式。
3. 同理，.sidebar-section:has(.inertia-link-active)选中包含激活链接的侧边栏区块，修改里面的.sidebar-section-label颜色。

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