伪类和伪元素是控制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-visiblepolyfill 影响：若页面加载了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）
伪类和伪元素的边界很薄：一个冒号、一个空格、一次嵌套、一种输入方式，都可能让样式彻底失联。最麻烦的不是写不出来，而是它“看起来正常”，直到某天在某个设备、某种交互路径下突然消失。
