CSS伪类与伪元素综合实战手册_100条高效开发的进阶指南

伪类和伪元素是控制dom表现层的最小干预单元；::before等伪元素必须用双冒号，:focus-visible按输入方式动态生效，::selection仅支持background-color和color，:is()取最高权重而:where()恒为0。

css 伪类和伪元素不是语法糖，是控制 DOM 表现层的最小干预单元；用错一个 ::before 或 :hover，就可能让交互失效、样式错乱、甚至被屏幕阅读器忽略。

什么时候该用 ::before 而不是 :before

老写法 :before 在 CSS2.1 里是允许的，但它是伪元素的“兼容写法”，现代浏览器（chrome 90+、firefox 85+、safari 15.4+）已明确要求伪元素必须用双冒号 ::before。单冒号会被当成伪类处理——虽然多数时候还能渲染，但一旦和自定义属性或 Shadow DOM 结合，就会静默失败。

• 所有新增伪元素（::marker、::placeholder、::file-selector-button）只支持双冒号写法
• :before 和 :after 在 CSS 预处理器（如 sass）中仍可编译，但会触发 ESLint 的 no-invalid-position-at-import-rule 类警告
• 如果项目要接入无障碍检测工具（如 axe-core），单冒号写法可能被标记为“非标准声明”

:focus-visible 替代 :focus 的真实条件

:focus-visible 不是 :focus 的升级版，而是按用户输入方式动态切换的“智能聚焦态”。它只在键盘导航（Tab/Shift+Tab）时生效，鼠标点击或触摸后不会触发——这点常被误认为“没生效”。

• 默认行为受 focus-visible polyfill 影响：若页面加载了 focus-visible.js，它会劫持原生 :focus 并注入 class，此时直接写 :focus-visible 反而无效
• Chrome 86+ 默认启用，但 Safari 目前（v17.6）仍需加前缀 :-webkit-focus-visible
• 不能和 :focus-within 嵌套使用：div:focus-within > button:focus-visible 是合法选择器，但实际匹配不到——因为 :focus-within 触发时，子元素未必满足“可见聚焦”条件

::selection 样式被忽略的三个硬限制

::selection 看似简单，但浏览器对它的支持极苛刻：它只作用于用户选中的文本节点，且不继承、不传播、不响应媒体查询变化。

立即学习“前端免费学习笔记（深入）”；

• 无法设置 display、margin、padding、border（这些属性会被强制重置为初始值）
• background-color 和 color 是唯二稳定生效的属性；其他如 text-shadow 在 Firefox 中失效，在 Safari 中仅部分生效
• 若父容器设置了 user-select: none，子元素即使显式声明 user-select: text，::selection 也完全不触发

:is() 和 :where() 别混着用

:is() 和 :where() 都能简化选择器，但它们的权重计算逻辑相反：前者取列表中最高优先级，后者永远为 0 —— 这直接影响样式覆盖结果。

• 写 button:is(.primary, .danger) 等价于 button.primary, button.danger，权重是 0-1-1
• 写 button:where(.primary, .danger) 权重恒为 0-0-0，哪怕后面跟 !important 也无法覆盖 button { color: red; }
• :is() 不支持伪元素：div:is(::before) 是非法语法；:where() 同样不支持，但错误提示更模糊（CSS parser 报 Unexpected Token）

伪类和伪元素的边界很薄：一个冒号、一个空格、一次嵌套、一种输入方式，都可能让样式彻底失联。最麻烦的不是写不出来，而是它“看起来正常”，直到某天在某个设备、某种交互路径下突然消失。