伪类必须用单冒号（如:hover），伪元素必须用双冒号（如::before）；混用或错用会导致规则被忽略、调试困难及层叠异常。
因为伪类和伪元素在语义与底层行为上根本不是一回事：伪类筛选真实 DOM 元素的状态，伪元素生成文档树里不存在的虚拟内容；单冒号是 CSS2 就定死的伪类语法，双冒号是 CSS3 为划清这条边界而强制引入的视觉提示。
伪类必须用 :，写成 ::hover 就静默失效
浏览器看到 ::hover、::focus 或 :not(::hover) 这类写法，不会报错，但整条规则直接被忽略——DevTools 样式面板里压根不显示它。原因很实在：:hover 只是对已有元素加一个“当前悬停中”的筛选条件，不插入节点、不生成内容，W3C 从 CSS2 开始就锁死了单冒号语法，CSS3 没改，以后也不会改。
-
a::hover { color: red; }→ 完全没反应，哪怕加了!important -
:not(::hover)→ 整个:not()条件崩掉，匹配逻辑彻底失效 - ESLint / Stylelint 会把它识别为非法选择器，报
selector-no-vendor-prefix类警告（实际是解析失败）
伪元素必须用 ::，新特性如 ::placeholder 只认双冒号
::placeholder、::selection、::backdrop 这些 CSS3 新增的伪元素，从设计之初就只支持双冒号。Chrome 57+、Firefox 51+、Safari 10.1+ 中，:placeholder 这种单冒号写法会被直接忽略，样式面板里都找不到它。
- 构建工具（如 cssnano、PostCSS）可能压缩时丢弃单冒号伪元素规则
- 同一选择器混写
div::before和div:before，PostCSS 插件可能去重或报冲突 - 团队协作中容易误判语义，把
::before当:hover处理，后续调试成本陡增
:not() 里只能嵌套单冒号伪类，不能塞伪元素
:not() 本身是伪类，括号内只接受能匹配真实 DOM 元素的条件。它不认伪元素，也不接受双冒号。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确：
a:not(:hover):not(:focus) - ❌ 错误：
a:not(::hover)（语法非法） - ❌ 错误：
a:not(:hover::before)（伪类+伪元素混用，顺序非法） - ⚠️ 避免：
:not(:not(:hover))（语法通过但行为不可靠，不同浏览器渲染不一致）
组合使用时顺序不能颠倒：button:hover::before 合法，button::before:hover 无效
伪元素（如 ::before）不是真实 DOM 节点，它没有自己的交互状态。:hover 只能作用于宿主元素（button），而不是它的渲染层子片段。所以 button::before:hover 整条规则会被浏览器忽略。
真正容易被忽略的是层叠上下文影响：一旦 button 设了 position: relative 和 z-index，它的 ::before 就自动成为第一个子 stacking context，此时它和按钮内部其他子元素的层级关系，得靠显式 z-index 和定位重新计算——这不是语法问题，而是渲染模型里的隐性约束。
