为何父CSS类未被识别且过滤器失效？附代码示例

Hey there! Let's break down your two issues and fix them step by step:

1. 关于"父CSS类无法被识别"的误解 #

其实你的.btns类是被正常识别的——你看.btns a定义的按钮样式（背景色、内边距这些）都能正常应用。你误以为父类没被识别，大概率是因为过滤器功能失效导致的连锁误解。

2. 过滤器功能失效的核心原因 #

问题出在CSS的**兄弟组合器(~)**的工作逻辑上：

• ~只能选择和当前元素同级且位于其之后的元素。
• 你的结构里，<a>是.btns的子元素，而.post是.btns的同级元素——也就是说，.post和<a>根本不是同级关系！所以原CSS里的.btns a[cat="java"]:focus ~ .post这种写法，完全找不到对应的.post元素，过滤器自然失效。
• 当你移除.btns容器后，<a>和.post变成了同级元素，~就能正常匹配，所以过滤器恢复工作。

修复方案 #

这里提供两种可行的修复方式：

方案一：使用:has()伪类（现代浏览器推荐） #

:has()允许我们基于子元素的状态来选择父元素，这样就能关联.btns和它的兄弟.post：

.btns a { 
  display: block; 
  float: left; 
  text-decoration: none; 
  text-align: center; 
  padding: 10px; 
  margin: 0 5px 0 0; 
  color: white; 
  background: #1271C7; 
}
.btns a:focus[cat] { 
  background-color: grey; 
}
/* 用:has()检测.btns内的激活a元素，再控制同级的.post */
.btns:has(a[cat="java"]:focus) ~ .post div:not([cat="java"]),
.btns:has(a[cat="internet-things"]:focus) ~ .post div:not([cat="internet-things"]),
.btns:has(a[cat="blockchain"]:focus) ~ .post div:not([cat="blockchain"]) { 
  display: none; 
}
/* 处理"Show all"的逻辑 */
.btns:has(a[cat="all"]:focus) ~ .post div {
  display: block;
}
.post div { 
  display: block; 
  float: left; 
  width: 99%; 
  border: 1px solid black; 
  margin-top: 20px; 
  background-color: lightgrey; 
}

注意：:has()目前在Chrome、Firefox 121+、Safari等现代浏览器中支持，如果你需要兼容旧版浏览器，建议用方案二。

方案二：JavaScript辅助（兼容旧浏览器） #

通过给.btns添加/移除激活类，再用CSS基于这个类控制.post的子元素：

// 获取所有按钮
const buttons = document.querySelectorAll('.btns a');
// 给每个按钮绑定focus事件
buttons.forEach(btn => {
  btn.addEventListener('focus', () => {
    // 移除所有按钮的激活状态
    buttons.forEach(b => b.classList.remove('active'));
    // 给当前按钮添加激活类
    btn.classList.add('active');
    // 获取当前按钮的cat属性值，给.btns添加对应属性
    const cat = btn.getAttribute('cat');
    document.querySelector('.btns').setAttribute('data-active-cat', cat);
  });
});

对应的CSS修改：

.btns a { 
  display: block; 
  float: left; 
  text-decoration: none; 
  text-align: center; 
  padding: 10px; 
  margin: 0 5px 0 0; 
  color: white; 
  background: #1271C7; 
}
.btns a:focus[cat], .btns a.active[cat] { 
  background-color: grey; 
}
/* 基于.btns的data-active-cat属性控制.post */
.btns[data-active-cat="java"] ~ .post div:not([cat="java"]),
.btns[data-active-cat="internet-things"] ~ .post div:not([cat="internet-things"]),
.btns[data-active-cat="blockchain"] ~ .post div:not([cat="blockchain"]) { 
  display: none; 
}
.btns[data-active-cat="all"] ~ .post div {
  display: block;
}
.post div { 
  display: block; 
  float: left; 
  width: 99%; 
  border: 1px solid black; 
  margin-top: 20px; 
  background-color: lightgrey; 
}

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