details标签的open属性和css样式不联动；open是布尔属性，仅控制展开状态，不会自动添加类或触发伪类，需用[open]属性选择器精准选中已展开元素。
details标签的open属性和CSS样式是否联动？
不联动。open 是布尔属性，它只控制元素是否展开，本身不会自动触发任何CSS类或伪类变化。浏览器不会因为open存在就给你加个.open类，也不会让:open这种伪类生效（目前只有:has()能间接捕获，但原生没:open）。
怎么用CSS选中已展开的details元素？
靠属性选择器：[open]。这是唯一稳定、跨浏览器、无需JS的方式。
-
details[open]匹配所有带open属性的<details></details>元素（无论值是open、""还是open="true"，只要属性存在就匹配） - 不能写成
details[open="open"]——虽然HTML里常写open="open"，但属性值实际被解析为空字符串，且浏览器对布尔属性的处理不保证值一致 - 不要用
details:open——这不是标准伪类，Chrome/Firefox都不支持
示例：
details[open] {
background-color: #f0f8ff;
}
details[open] summary {
background-color: #e6f2ff;
}
summary展开箭头和背景色一起改，要注意什么？
默认summary是行内元素，且有内置的display: list-item行为，直接设background-color可能被箭头覆盖或出现布局错位。
- 给
summary加display: block或inline-block再设背景，避免箭头“飘”在背景外 - 如果想隐藏原生箭头再自定义，用
summary::marker { content: "" }（注意：Firefox支持，Chrome 115+才支持::marker，旧版需list-style: none+padding-left手动调整） -
details[open] summary选择器优先级比summary高，确保样式生效
为什么JavaScript监听open事件后改class反而更麻烦？
因为open属性本身会同步更新，你不需要JS就能用[open]精准响应状态。加JS反而引入额外复杂度：
- 要监听
toggle事件（不是click），否则手动el.open = true时事件不触发 - 要处理初始
open属性（页面加载时已展开）——此时toggle事件根本不会发生 - 多个
details共存时，每个都要单独绑定，而[open]CSS天然全局生效
除非你要做动画过渡（比如height渐变），否则纯背景色切换完全没必要动JS。
真正容易被忽略的是：CSS里details[open] > *这种后代选择器，会匹配到summary之后的所有内容（包括p、div等），但不会影响summary自己——得单独写details[open] summary。很多人只改了容器背景，忘了summary还裸着。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
