伪元素可用:before，但推荐::before；css2旧伪元素单双冒号等效，css3新伪元素如::selection、::placeholder必须用双冒号，单冒号会静默失效。
伪元素必须写 ::before 还是也能用 :before？
能用，但不推荐全用单冒号。CSS2 时代所有伪元素（如 :before、:after、:first-letter）都用单冒号；CSS3 明确要求新伪元素（如 ::selection、::placeholder、::marker）必须用双冒号，旧伪元素则「允许」单冒号写法以保兼容。
浏览器实际执行时，:before 和 ::before 效果完全一致——这不是语法错误，而是规范演进留下的过渡空间。但如果你写了 :selection，在 Chrome/Firefox 中会直接失效，必须写成 ::selection。
::placeholder 为什么不能写成 :placeholder？
因为它是 CSS3 新增的伪元素，W3C 规范强制要求双冒号。单冒号写法在现代浏览器中被忽略，连 DevTools 都不会高亮它，控制台也不会报错，只是静默失效。
-
::placeholder✅ 正确，Chrome 57+、Firefox 51+、Safari 10.1+ 均支持 -
:placeholder❌ 不生效，即使加了!important也无效 - IE 完全不支持
::placeholder（包括单/双冒号），需用 JS fallback
为什么 :not() 是伪类，而 ::backdrop 是伪元素？
判断依据不是冒号数量，而是语义：伪类描述「状态」，伪元素创建「内容容器」。
:not() 是典型的伪类——它筛选满足条件的元素，不生成新节点，也不插入内容，只改变已有元素的样式匹配逻辑；::backdrop 则是在 <dialog></dialog> 打开时，浏览器自动在它背后生成一个不可见的层，你通过它设置遮罩背景，这个层不在 DOM 中，但可被选中和样式化，符合伪元素定义。
容易混淆的点：:is()、:where()、:has() 全是伪类，尽管它们能力强大，但依然不产生新内容。
兼容性兜底时，该保留单冒号还是统一双冒号？
优先用双冒号，对已知旧伪元素（::before、::after、::first-line 等）加 IE8–9 兜底时再额外写一条单冒号规则。
不要混用：同一选择器里写 div::before, div:before 是冗余且易维护错的；更稳妥的做法是：
div::before {
content: "✓";
}
/* IE8–9 不支持 ::before，但支持 :before */
@media screen and (min-width: 0\0) {
div:before {
content: "✓";
}
}
真正要警惕的不是冒号数量，而是把 ::file-selector-button（CSS4 新伪元素）误写成单冒号——这种写法在任何浏览器都不起作用，且无提示。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
