伪类必须用单冒号:，伪元素必须用双冒号::；混用会导致规则被浏览器静默丢弃且devtools不显示，如::hover非法、:placeholder无效、:not()内冒号错误或组合顺序颠倒均使整条规则失效。
伪类必须用单冒号 :，伪元素必须用双冒号 ::——这不是可选项，而是语义强制约束；混用会导致规则被浏览器静默丢弃，且 DevTools 中完全不显示。
为什么 :hover 写成 ::hover 就失效
因为 :hover 描述的是 DOM 元素的交互状态，它不生成新节点，也不参与渲染树构建。浏览器遇到 ::hover 会直接判定为非法选择器，整条 CSS 规则被跳过，控制台无报错、样式面板里也找不到它。
-
::hover不是 W3C 定义的任何伪元素，语法上不存在 - 所有现代浏览器（Chrome 120+、Firefox 125+、Safari 17+）均忽略该写法
- ESLint 或 Stylelint 的
selector-no-vendor-prefix类规则会报错，提示“invalid pseudo”
::placeholder 等新伪元素根本不认单冒号
从 CSS3 开始新增的所有伪元素，如 ::placeholder、::selection、::backdrop、::file-selector-button，只定义了双冒号形式。它们在主流浏览器中对 :placeholder 这类写法完全不响应。
- Chrome 57+、Firefox 51+、Safari 10.1+ 均静默丢弃单冒号版本
- 构建工具（如 cssnano、PostCSS autoprefixer）启用严格模式后，会直接移除
:placeholder规则 -
::file-selector-button写成:file-selector-button—— 所有浏览器都不识别，且无任何提示
:not() 里冒号数量错一个，整条规则就废
:not() 是伪类，括号内只能接受合法伪类，且必须是单冒号。多打、少打或混用冒号，都会导致语法非法，浏览器跳过整条规则。
- ✅ 正确：
a:not(:hover):not(:focus) - ❌ 错误：
a:not(::hover)（伪元素不能进:not()） - ❌ 错误：
a:not(:hover::before)（伪类+伪元素非法组合） - ⚠️ 注意：
:not()不支持嵌套，:not(:not(:hover))虽语法通过，但各浏览器行为不一致
伪类和伪元素组合时顺序不能颠倒
伪元素是宿主元素的渲染子层，它自身没有交互状态。所以 button:hover::before 合法，而 button::before:hover 会被浏览器完全忽略。
- ✅ 正确：状态在前、伪元素在后 →
input:focus::placeholder - ❌ 错误：伪元素在前、状态在后 →
input::placeholder:focus（无效） - ⚠️ 额外陷阱：一旦宿主元素设了
position: relative和z-index，它的::before就自动成为子 stacking context，此时需额外控制z-index，否则可能被遮住
真正容易被忽略的不是语法本身，而是构建工具的静默处理和层叠上下文的隐式创建——即使你写了全对的 ::placeholder，也可能因 PostCSS 插件去重、或父容器 z-index 设置不当，让样式根本不出现在页面上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
