CSS条件兄弟选择器：如何匹配同层级li的id与data-sidebar-group属性？

<ul class="list-group list-group-flush"  hx-on:click="if (event.target.classList.contains('list-group-item')) htmx.takeClass(event.target, 'active')">
    <li id="group-1" tabindex="0">Group 1</li>
    <li data-sidebar-group="group-1">Item 1</li>
    <li data-sidebar-group="group-1">Item 2</li>
    <li id="group-2" tabindex="0">Group 2</li>
</ul>

制作侧边栏时，我需要选中所有data-sidebar-group属性值与另一个

纯CSS没办法实现这个需求。因为CSS选择器只能处理固定的属性值匹配，或者基于元素位置的关系选择，没法动态把一个元素的id值作为另一个元素data-sidebar-group的匹配条件——CSS没有这种变量式的属性值关联匹配能力。你设想的li~li[data-sidebar-group=id]这类选择器里的id只是普通字符串，无法指代兄弟元素的实际id值。

要实现这个需求必须用JavaScript，以下是简单的实现思路：

1. 遍历所有带id的<li>元素
2. 对每个带id的元素，找到所有data-sidebar-group属性值等于该id的兄弟<li>
3. 可以给匹配的元素添加类名，后续用CSS控制样式，或者直接做其他操作

示例代码：

// 获取所有带id的li元素
const groupHeaders = document.querySelectorAll('li[id]');

groupHeaders.forEach(header => {
  const groupId = header.id;
  // 找到所有data-sidebar-group等于当前id的兄弟li
  const groupItems = header.parentElement.querySelectorAll(`li[data-sidebar-group="${groupId}"]`);
  
  // 给匹配元素添加类名示例
  groupItems.forEach(item => {
    item.classList.add('matched-group-item');
    // 也可以结合你的htmx逻辑做处理
  });
});

如果需要和你现有的htmx点击激活逻辑结合，比如点击分组标题时选中对应子项，也可以把这个逻辑整合到htmx的点击事件里。

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