:focus-visible仅在键盘聚焦时生效，需polyfill适配旧浏览器；不可直接用:focus替代，否则破坏可访问性；测试应通过devtools手动勾选验证，而非依赖鼠标点击后tab。
企业内网项目用CSS3伪类基本没问题，但得看具体用哪个、谁在用、怎么用——不是所有伪类都“开箱即用”。
查清目标浏览器的版本和启用状态
内网环境常有老旧浏览器（比如IE11、Edge Legacy、定制版Chrome），:focus-visible、:has()、:is() 这类CSS4级伪类在IE中完全不支持，Edge 18及更早也不认 :focus-visible。别只看“Chrome最新版支持”，得导出内网终端真实的UA统计或直接测试。
- 用
document.querySelector(':focus-visible')在控制台试一下，返回null就代表当前环境不识别该伪类语法（会静默失败，不报错） -
:nth-child()和:hover这类基础伪类在IE9+就稳定支持，可放心用 - 如果用了
:has()做表单校验联动，而内网还有大量Windows 7+IE11终端，就得立刻换方案（比如加class手动控制）
警惕伪类触发时机与交互逻辑冲突
伪类是纯CSS响应机制，没有JavaScript那样的执行时序控制。比如 :focus-within 在父容器内任一子元素获得焦点时就生效，但如果子元素是动态插入的（如Vue组件v-if切换后挂载），某些旧版浏览器可能无法及时重绘样式。
-
:focus-within在IE和Edge 17–18中不支持，且Safari 15.4之前对动态内容响应有延迟 -
:checked+~邻居选择器做开关控件时，若复选框被JS设为disabled，样式仍会保留——因为:checked只管状态，不管是否可用 - 用
:invalid做实时校验？注意它依赖checkValidity()的底层触发，某些表单库（如Ant Design v4）会屏蔽原生验证行为，导致伪类一直不生效
别把伪类当逻辑分支来用
伪类适合样式响应，不适合状态管理。比如有人用 :not(:checked) + .tip 控制提示文字显隐，看似简洁，但一旦后续需求变成“提交失败后也要显示提示”，这个CSS路径就撑不住了——它没能力读取AJAX响应或表单提交状态。
- 结构类伪类（如
:first-child、:nth-of-type()）相对安全，只要DOM结构稳定，样式就稳定 - 状态类伪类（如
:hover、:active）在触屏设备上可能失效（移动端无真正hover），内网若含平板/工控触摸屏，需额外加@media (hover: hover)做条件包裹 - 涉及无障碍（a11y）的伪类，如
:focus-visible，若内网用户含高频键盘操作员，反而比:focus更精准；但若全员用鼠标，它可能根本不会触发，导致焦点样式丢失
真正容易被忽略的点：伪类的层叠优先级和继承行为不可视化。一个 button:hover 样式被另一个 .btn-primary:focus 覆盖，你很难一眼看出是谁赢了——得打开开发者工具逐条看computed styles里的“matched CSS rules”。内网项目迭代快、多人维护，这类隐性依赖比兼容性问题更难排查。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
