details标签仅作语义化筛选面板容器，无法独立实现过滤；必须配合同级checkbox、data-属性及css兄弟选择器（:checked + ~）协同工作，三者在大小写、命名、层级上需严格对齐。
details 标签本身不能直接构建内容过滤器——它只负责折叠/展开，不参与筛选逻辑。真要实现“勾选即过滤”，必须配合 input[type="checkbox"]、data- 属性和 CSS 兄弟选择器，details 只是作为筛选区的容器。
为什么不能只用 details 实现过滤
常见误解是把 details 当成“筛选开关”，但它的 open 属性只控制自身显隐，无法联动其他元素的显示状态。你点开一个 details，不会自动隐藏所有不匹配的卡片或表格行——这需要额外的 DOM 匹配机制。
- 错误做法：
<details><summary>语言</summary><label><input type="checkbox" value="python"> Python</label></details>→ 勾选后什么都不会变 -
details没有内置的“值绑定”或“事件广播”能力，它不产生change事件，也不影响其他节点的样式 - 想靠它驱动过滤，必须用 JS 监听
toggle事件再手动操作 DOM，那就失去了“纯 HTML 过滤”的意义
details 在过滤系统里的正确定位
它唯一可靠的角色是：**语义化、可访问、免 JS 的筛选面板容器**。所有 checkbox 必须放在同一个父级下（比如 <main></main> 或 <section></section>），而 details 只用来包裹每组筛选项的标题和选项列表。
- 每个维度（语言、状态、难度）独立一个
details，summary写标题，内部放input[type="checkbox"]和对应label -
details的open属性只控制该组是否可见，不影响过滤结果；过滤由 checkbox 的:checked状态 + CSS 选择器驱动 - 别给
details设display: none—— 它会从可访问性树中消失，屏幕阅读器读不到里面的 checkbox - 若需默认收起某组，加
open属性即可：<details open></details>表示默认展开，不加就是默认收起
结构对齐是 CSS 过滤生效的前提
CSS 的 :checked + ~ 兄弟选择器能工作的唯一条件：所有 input[type="checkbox"] 必须在待过滤元素的**前面且同级**。一旦嵌套层级错位，过滤就失效。
- 正确结构示例：
<main><input type="checkbox" name="filter-language" value="javascript"><input type="checkbox" name="filter-language" value="python"><div class="item" data-language="javascript">JS 项目</div> <div class="item" data-language="python">Python 脚本</div> </main>
- 错误结构：
<details><summary>语言</summary><input value="javascript"></details><div data-language="javascript">…</div>→input和div不同级，~选不到 - 如果结构受限（如卡片组件已封装好），改用
hidden属性 + JS 切换更稳妥，比强行改 DOM 结构成本低
大小写与属性名不一致是最常见的过滤失效原因
HTML 属性值区分大小写，value="JavaScript" 和 data-language="javascript" 不匹配，CSS 选择器根本不会生效。
- 所有
input的value必须和目标元素的data-*值**完全一致**（建议全小写、无空格、无特殊字符） - 同一维度的所有 checkbox 必须共用相同
name，比如都叫filter-language，否则无法批量识别 - CSS 规则里不要写
input[name="filter-language"][value="javascript"]:checked ~ .item:not([data-language="javascript"])这种长链——容易漏引号或拼错，优先用input[value="javascript"]:checked ~ .item:not([data-language="javascript"]) - 测试时直接在浏览器控制台运行
document.querySelectorAll('input[value="javascript"]:checked')，看是否能取到勾选项，这是排查的第一步
真正难的不是写对一个 details，而是让 checkbox、data- 属性、CSS 选择器三者在大小写、命名、层级上全部对齐。少一个环节，过滤就静默失败——而且没有任何报错提示。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
