伪类必须用单冒号，伪元素必须用双冒号；:not()内仅支持单冒号伪类；伪类+伪元素组合须为“宿主伪类::伪元素”顺序，如button:hover::before。
伪类必须用单冒号，双冒号写法直接失效
浏览器遇到 ::hover、::focus、::not() 这类写法，会整条 CSS 规则跳过——不报错、不渲染、DevTools 里都看不到它。因为伪类语义上只描述「状态」，W3C 从 CSS2 就定死用单冒号，CSS3 也没改这个底层约定。
常见错误现象：
-
a::hover { color: red; }完全没反应，哪怕加了!important -
:not(::hover)导致整个:not()条件失效，匹配逻辑崩掉 - ESLint 或 Stylelint 报
selector-no-vendor-prefix类警告（实际是解析器识别为非法选择器）
伪元素必须用双冒号，单冒号在新特性上静默失效
::placeholder、::selection、::backdrop 这些 CSS3 新增伪元素，单冒号写法（如 :placeholder）在 Chrome 57+、Firefox 51+、Safari 10.1+ 中直接被忽略，连样式面板都不会显示该规则。
::before 和 ::after 属于“过渡期伪元素”，双冒号是标准写法；单冒号 :before 仅因兼容保留，但混用风险高：
立即学习“前端免费学习笔记（深入）”；
- 同一选择器里同时写
div::before和div:before，PostCSS 插件可能去重或报冲突 - 构建工具（如 cssnano）可能把单冒号规则压缩丢弃
- 团队协作中容易误判语义，把伪元素当伪类处理
:not() 里只能嵌套单冒号伪类，不能出现伪元素
:not() 是伪类，它的括号内只接受「能匹配 DOM 元素」的条件，不能出现伪元素，也不能用双冒号。合法写法只有 :not(:hover)、:not(:nth-child(2)) 这类。
错误组合会直接让整条规则失效：
-
:not(::hover)→ 语法非法，浏览器跳过 -
:not(:hover::before)→ 伪类+伪元素混用，顺序非法 -
:not(:not(:hover))→ 虽语法通过，但不同浏览器渲染行为不一致，应避免
伪类 + 伪元素组合时，顺序不能颠倒
要给「悬停状态下的 ::before 内容」加样式，必须写成 button:hover::before。反过来写 button::before:hover，浏览器直接忽略整条规则。
原因很实在：伪元素（如 ::before）不是真实 DOM 节点，它没有自己的交互状态；:hover 只能作用于宿主元素（button），而不是它的渲染层子片段。
真正容易被忽略的是层叠上下文影响：一旦 button 设了 position: relative 和 z-index，它的 ::before 就自动成为第一个子 stacking context，此时它和按钮内部其他子元素的层级关系，得靠额外的 z-index 显式控制——这不是语法问题，是渲染模型里的隐性约束。
