需用 radio/checkbox 配合 label 和 :checked 选择器实现高亮，input 要前置或 for 绑定，隐藏用 absolute+opacity+pointer-events；:focus-within 需子元素可聚焦（加 tabindex 或用 button/a）。
flex容器里怎么让选中的列表项高亮显示
直接用 :checked 不行，因为 li 不能被原生选中；得靠 input[type="radio"] 或 input[type="checkbox"] 配合 label 和 :checked + + / ~ 选择器来触发样式变化。核心是把可交互控件“藏起来”，视觉上只留 li 或其内容。
- 必须把
input放在label前面（或用for绑定），否则:checked + label会失效 -
label要设为display: flex或继承父级display: flex，不然内部对齐、间距会乱 - 别用
visibility: hidden隐藏input—— 它仍占布局空间；改用position: absolute; opacity: 0; pointer-events: none;
为什么 :focus-within 在 flex 列表里有时不生效
因为 :focus-within 要求子元素能获得焦点，而默认的 div 或 span 没有 tabindex 就无法聚焦。flex 容器本身不接管焦点逻辑，它只是布局层。
- 如果用
div当列表项，记得加tabindex="0"才能触发:focus-within - 用
button或a更稳妥 —— 它们天然可聚焦，且语义正确 - Chrome 和 Safari 对
:focus-within支持良好，但旧版 Edge（focusin
flex 布局下 :checked 样式偏移或错位
常见原因是伪类样式修改了 label 的 flex 属性（比如加了 flex: 1 或改了 align-items），导致整个项尺寸或对齐方式突变，看起来像“跳动”或“缩进”。不是 bug，是 flex 重排的结果。
- 统一用
min-width: 0或overflow: hidden防止文本撑宽导致 flex 项收缩异常 - 高亮时慎用
padding或margin—— 会改变主轴尺寸；优先用background、border或box-shadow - 若用
gap控制列表间距，选中态不要动态增减gap，它会影响所有子项，包括未选中的
移动端点击区域小、误触多，怎么优化
flex 列表项默认点击热区只有内容大小，尤其文字少时，手指点不中。这不是 CSS 能单独解决的，得结合布局和交互逻辑。
-
label必须包裹完整可视区域，且设display: block或flex，不能只包文字 - 给
label加min-height: 44px（iOS 推荐最小触控高度），配合padding确保热区足够 - 避免在
label内再嵌套div或span并设pointer-events: none—— 这会让点击穿透，失去选中效果 - 如果用 JS 补充逻辑（比如单选后自动 blur 其他），注意
touchend比click更及时，减少延迟感
实际最易忽略的是：flex 容器的 align-items 和子项的 height / min-height 共同决定了点击热区是否“填满”。很多人调完 :checked 样式就以为完了，结果测试时发现边缘点不中，回头才发现 label 高度没撑开。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
