纯HTML可实现基础过滤，需用details+summary做筛选区、input[type="checkbox"]的name/value规范映射data属性、CSS兄弟选择器或hidden属性控制显隐，并用label包裹提升点击体验。
纯 HTML 就能实现基础过滤，但必须用对 details、input[type="checkbox"] 和 hidden 属性的组合逻辑，否则会卡在“状态不同步”或“筛选后内容不消失”上。
用 details + summary 做可折叠筛选区，别用 JS 控显隐
很多人想用 div 配 onclick 切 class 控制显示，结果要写 JS 绑定、维护 open 状态、还要防重复触发。其实 details 原生支持开合、语义清晰、键盘可访问，且自带 open 属性控制初始状态。
实操建议：
- 把每个筛选维度（如“语言”“状态”“难度”）包进独立的
details元素里 - 用
summary作标题，内部可放small显示当前已选数量（需配合 JS 更新，但仅限计数，不影响过滤逻辑） - 避免给
details设display: none—— 这会让它彻底脱离可访问性树，屏幕阅读器无法识别
input[type="checkbox"] 的 name 和 value 必须设计成可批量匹配
过滤的核心是让 DOM 节点能根据勾选状态自动显隐，所以每个选项的 value 应该是能直接映射到目标元素属性的字符串，比如 value="python" 对应 data-language="python"。
立即学习“前端免费学习笔记（深入）”；
常见错误现象：
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
-
value="Python"（首字母大写）却匹配data-language="python"→ 大小写不一致导致过滤失效 -
name="lang"和name="language"混用 → 后续用 CSS 选择器批量读取时漏掉部分控件 - 用
id当 value（如value="lang-py-1"）→ 无法泛化匹配，丧失可维护性
推荐结构：<input type="checkbox" name="filter-language" value="javascript">，对应数据节点：<article data-language="javascript">。
用 CSS :checked + ~ 或 + 实现无 JS 过滤
关键不是“能不能”，而是“怎么连通 checkbox 和目标内容”。CSS 无法跨父级选择，所以 DOM 结构必须满足：checkbox 在目标内容之前，且处于同一父容器内，才能用兄弟选择器驱动显隐。
实操要点：
- 把所有
input[type="checkbox"]放在最外层容器顶部（比如main内第一组），后面紧跟所有待过滤的卡片/列表项 - 用
input[name="filter-language"]:checked ~ [data-language="python"] { display: none; }是错的 ——~只匹配**后续同级**元素，不能嵌套匹配 - 正确写法是为每种组合预设规则，例如：
input[value="python"]:checked ~ .item:not([data-language="python"]) { display: none; }，前提是所有.item是input的同级后续元素 - 如果结构不允许同级，就改用
hidden属性 + 少量 JS 切换 —— 此时 JS 只负责加/删hidden，不操作样式，兼容性更好、更轻量
移动端点击区域太小？别只加 padding，优先用 label 包裹
用户点不中 checkbox 是高频问题，尤其在 iOS Safari 上。光靠增大 input 自身尺寸无效，因为原生 checkbox 渲染不可控。
可靠解法：
- 每个 checkbox 必须有配套
label，且用for关联id，或直接包裹input（推荐后者） -
label上设display: block和足够padding，视觉点击区变大，同时保持语义完整 - 避免用
span模拟 label 并绑定 click —— 这绕过表单原生行为，会导致空格键无法切换、辅助技术不可见
真正麻烦的是多条件交集过滤 —— CSS 无法表达 “同时勾选 A 和 B 才显示”，这时必须引入极简 JS 来计算匹配逻辑，但依然可以复用上面的 HTML 结构和属性约定，只是把最终的 hidden 切换交给脚本。别从一开始就放弃 HTML 原生能力，先跑通单条件，再补交集逻辑。
