伪类必须用单冒号，伪元素必须用双冒号；混用或错序（如::hover、:placeholder、:not(::hover)、button::before:hover）将导致整条规则被浏览器静默忽略。
因为单冒号:和双冒号::在语义上根本不是一回事——前者只匹配状态，后者才真正“造内容”，混用会直接让整条规则被浏览器静默丢弃。
伪类必须用单冒号:，写成::hover就彻底失效
浏览器遇到::hover、::focus或:not(::hover)这类写法，不会报错，也不会渲染，DevTools 里根本看不到这条规则。原因很实在：:hover只是给已有 DOM 元素加一个“当前悬停中”的筛选条件，它不插入新节点、不生成新内容。W3C 从 CSS2 就定死伪类用单冒号，CSS3 也没改这个底层约定。
-
a::hover { color: red; }→ 完全没反应，哪怕加了!important -
:not(::hover)→ 整个:not()条件崩掉，匹配逻辑失效 - ESLint 或 Stylelint 会报
selector-no-vendor-prefix类警告（实际是解析器识别为非法选择器）
伪元素必须用双冒号::，旧写法:placeholder在新浏览器里静默失效
CSS3 新增的伪元素（如::placeholder、::selection、::backdrop）从设计之初就只支持双冒号。Chrome 57+、Firefox 51+、Safari 10.1+ 中，:placeholder这种单冒号写法会被直接忽略，样式面板里都找不到它。
-
::before和::after虽仍兼容:before，但构建工具（如 cssnano）可能压缩丢弃单冒号规则 - 同一选择器里混写
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显式控制 - 这不是语法问题，而是渲染模型里的隐性约束，开发者工具里看不出，但视觉表现会出错
