概述`:focus-within` 在元素自身或其后代获取焦点时匹配,适用于高亮容器、显示辅助提示、展开交互区域等,增强键盘与读屏体验。示例.field:focus-within { outline: 2px solid Highlight; outline-offset: 2px } .menu:focus-within .submenu { display: block } 工程建议组合使用:与 `:focus-visible` 配合控制不同交互下的样式;避免过度闪烁。结构与语义:确保容器与控件语义正确;Tab 顺序合理。兼容:在旧浏览器回退到 JS 管理类名;保持一致体验。参考与验证MDN `:focus-within` 文档:https://developer.mozilla.org/docs/Web/CSS/:focus-withinweb.dev 无障碍焦点指南:https://web.dev/

点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论
立即
投稿

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部