必须用双冒号的伪元素包括::placeholder、::selection、::backdrop、::marker等css3新增伪元素，单冒号写法在现代浏览器中静默失效；旧伪元素::before/::after虽兼容单冒号，但推荐统一使用双冒号。
双冒号 :: 是伪元素的规范写法，单冒号 : 是历史兼容写法；新伪元素（如 ::placeholder）只认双冒号，写了单冒号就静默失效。
哪些伪元素必须用双冒号？
所有 CSS3 新增的伪元素都强制要求双冒号，浏览器对单冒号写法直接忽略——不报错、不渲染、DevTools 里也看不到规则。
-
::placeholder：表单输入框占位符，:placeholder完全无效 -
::selection：用户选中文本样式，:selection在 Chrome 57+、Firefox 51+、Safari 10.1+ 中失效 -
::backdrop：配合<dialog></dialog>使用，:backdrop不起作用 -
::marker：自定义列表项符号，:marker被无视
旧伪元素（::before/::after）能用单冒号吗？
能，但只是兼容性残留，不是推荐做法。浏览器仍支持 :before 和 :after，是因为 CSS2 就定义了它们为伪类，后来 CSS3 才“升格”为伪元素并引入双冒号。
- 效果完全一致：
.box:before和.box::before渲染结果一样 - 但构建工具（如 cssnano）可能压缩掉单冒号规则
- ESLint/Stylelint 会把
:before当作过时写法警告 - 混用（比如同时写
.box::before和.box:before）易导致维护混乱或 PostCSS 插件冲突
:not() 里为什么不能写双冒号？
:not() 是伪类，括号内只接受伪类，且必须是单冒号。它筛选的是真实 DOM 元素，而伪元素（如 ::before）根本不在 DOM 中，无法被 :not() 匹配。
- ✅ 合法：
:not(:hover)、:not(:disabled) - ❌ 失效：
:not(::hover)（语法非法）、:not(:hover::before)（伪类+伪元素混用，顺序错误） - ⚠️ 注意：
:not()里嵌套另一个:not()（如:not(:not(:hover))）虽语法通过，但各浏览器行为不一致，应避免
伪类和伪元素组合时顺序不能颠倒
要给「悬停状态下的 ::before」加样式，必须写成 button:hover::before。反过来写 button::before:hover，整条规则被浏览器跳过。
- 原因：伪元素不是真实节点，没有自己的交互状态；
:hover只能作用于宿主元素 - 层叠上下文容易被忽略：一旦宿主元素设了
position: relative和z-index，它的::before就自动成为首个子层叠上下文，此时它和内部其他子元素的层级关系需显式用z-index控制 - IE 完全不支持
::placeholder（无论单双冒号），必须用 JS fallback
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
