伪元素必须用双冒号::，因css3语义强制区分伪元素与伪类；单冒号新伪元素如:placeholder在现代浏览器中静默失效；混用单双冒号会导致规则丢失或解析错误；伪类严禁双冒号；伪元素z-index受宿主层叠上下文约束。
伪元素必须用双冒号::是CSS3的语义强制，不是可选升级
CSS3规范明确把::before、::after、::placeholder等定义为“伪元素”，而:hover、:focus、:not()等属于“伪类”——二者底层行为完全不同：伪类筛选真实DOM元素的状态，伪元素在渲染层凭空生成虚拟内容。双冒号不是为了“看起来更高级”，而是W3C划清这条语义边界的硬性标记。
浏览器不是“建议你用::”，而是对新伪元素（如::selection）直接拒绝单冒号写法：:placeholder在Chrome 57+、Firefox 51+、Safari 10.1+中静默失效，DevTools样式面板里压根不显示该规则，也不报错。
混用单双冒号会导致规则被忽略或构建异常
同一项目中交替使用:before和::before看似无害，实际埋下多个隐患：
-
div:before { content: "A"; } div::before { content: "B"; }——PostCSS插件可能去重，最终只保留一个 - cssnano等压缩工具会把单冒号伪元素规则识别为过时语法，直接丢弃
- ESLint/Stylelint将
:before标为selector-no-vendor-prefix类警告，本质是解析器判定为非法选择器 - 团队成员看到
button::before:hover容易误以为能监听伪元素悬停，实际整条规则被浏览器静默忽略
伪类不能写成双冒号，否则整个选择器失效
::hover、::focus、::not(:hover)这类写法在所有现代浏览器中都完全无效。原因很直接：伪类语法从CSS2起就锁定为单冒号，CSS3没改，以后也不会改。常见错误现象包括：
-
a::hover { color: red; }→ DevTools样式面板里找不到这条规则，加!important也无济于事 -
input:not(::placeholder)→:not()括号内只接受能匹配真实DOM的条件，双冒号直接让整个:not()逻辑崩掉 -
:is(::before)→:is()是伪类，不接受伪元素，语法通过但行为不可靠
真正容易被忽略的是层叠上下文与宿主绑定
伪元素不进DOM，但它和宿主元素的层叠关系不是独立的。一旦宿主设了position: relative和z-index，它的::before就自动成为第一个子层叠上下文——此时你给::before设z-index，若宿主没显式创建层叠上下文，这个z-index根本不起作用。这不是冒号写错的问题，而是渲染模型里隐性绑定的约束。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
