伪类必须用单冒号，伪元素必须用双冒号；:hover写成::hover会静默失效，::placeholder用单冒号被忽略，button:hover::before顺序颠倒则整条规则无效，:not()内只允许单冒号伪类。
伪类用单冒号是语义定死，不是浏览器“宽容”
伪类（如 :hover、:focus、:not()）描述的是元素的「状态」，它不生成新节点，只对已有 DOM 元素做条件筛选。W3C 从 CSS2 开始就规定伪类必须用单冒号，CSS3 没改——这不是兼容让步，而是底层语义契约。
常见错误现象：a::hover { color: red; } 在所有现代浏览器里完全没反应，DevTools 样式面板里根本看不到这条规则；:not(::hover) 会让整个 :not() 条件失效，匹配逻辑崩掉。
ESLint 或 Stylelint 报的 selector-no-vendor-prefix 类警告，实际是解析器识别出非法选择器，不是拼写问题，是语法越界。
伪元素用双冒号是强制语义分隔，不是“可选升级”
CSS3 明确要求新增伪元素（如 ::placeholder、::selection、::backdrop）必须用双冒号。浏览器不是“建议你用”，而是直接忽略单冒号写法：Chrome 57+、Firefox 51+、Safari 10.1+ 中 :placeholder 静默失效，连样式面板都不显示。
::before 和 ::after 属于过渡期伪元素，单冒号 :before 仍被支持，但混用风险高：
- 同一选择器里同时写
div::before和div:before，PostCSS 插件可能去重或报冲突 - 构建工具（如 cssnano）可能把单冒号规则压缩丢弃
- 团队协作中容易误判语义，把
::before当成伪类处理
伪类和伪元素混用时顺序不能颠倒
要给「悬停状态下的 ::before 内容」加样式，必须写成 button:hover::before。反过来写 button::before:hover，整条规则被浏览器静默忽略。
原因很实在：::before 不是真实 DOM 节点，没有自己的交互状态；:hover 只能作用于宿主元素（button），不能作用于它的渲染层子片段。
真正容易被忽略的是层叠上下文影响：一旦 button 设了 position: relative 和 z-index，它的 ::before 就自动成为第一个子 stacking context，此时它和按钮内部其他子元素的层级关系，得靠额外的 z-index 显式控制——这不是语法问题，是渲染模型里的隐性约束。
:not() 里只能嵌套单冒号伪类，且不能出现伪元素
:not() 本身是伪类，括号内只接受能匹配真实 DOM 元素的条件。它不认伪元素，也不接受双冒号。
✅ 正确：a:not(:hover):not(:focus)
❌ 错误：a:not(::hover)（语法非法）
❌ 错误：a:not(:hover::before)（伪类+伪元素混用，顺序非法）
⚠️ 避免：:not(:not(:hover))（语法通过但行为不可靠，不同浏览器渲染不一致）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
