无JS实现Div筛选：添加sidebar定位后CSS选择器失效求助

你遇到的核心问题是CSS兄弟选择器~的作用范围限制：

• 兄弟选择器只能选择同一父元素下的后续兄弟节点。当你给button加上#sidebar前缀后，选择器里的~ div会在#sidebar内部寻找button的后续兄弟div，但#sidebar里只有<h3>和其他button，根本没有目标的动物列表容器#animals，所以选择器完全匹配不到任何元素，筛选逻辑自然失效。
• 原CSS能生效，应该是之前button和#animals处于同一父级（.filteredList），此时button:focus ~ div能直接选中#animals；但现在button被包裹进#sidebar，层级结构改变，兄弟选择器的作用范围就被局限在#sidebar内部了。

使用CSS的:has()伪类，它可以让父元素根据子元素的状态来关联选择其他兄弟元素。修正后的CSS如下：

/* walks筛选：隐藏非walks类的动物 */
.filteredList:has(#sidebar button[data-filter="walks"]:focus) #animals div:not([class*="walks"]),
/* swims筛选：隐藏非swims类的动物 */
.filteredList:has(#sidebar button[data-filter="swims"]:focus) #animals div:not([class*="swims"]),
/* flies筛选：隐藏非flies类的动物 */
.filteredList:has(#sidebar button[data-filter="flies"]:focus) #animals div:not([class*="flies"]) {
  display: none;
}

/* 补充All按钮逻辑：显示所有动物 */
.filteredList:has(#sidebar button[data-filter="*"]:focus) #animals div {
  display: block;
}

• :has()伪类会检查.filteredList是否包含符合条件的子元素（即#sidebar内处于focus状态的对应筛选按钮），如果满足条件，就会选中.filteredList下的#animals容器内的目标元素。
• 目前Chrome 105+、Firefox 121+、Safari 15.4+等主流浏览器均已支持:has()特性。

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