CSS伪类与伪元素实战100条

CSS伪类与伪元素远非语法糖，而是精准控制DOM表现层的“最小干预单元”，但其行为高度敏感：双冒号（::before）是现代伪元素的强制标准，单冒号在复杂场景下会静默失效；:focus-visible并非:focus的简单替代，而是依输入方式智能触发的聚焦态，鼠标点击不激活；::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）

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

好了，本文到此结束，带大家了解了《CSS伪类与伪元素实战100条》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！