伪类作用于dom元素状态，伪元素生成渲染层虚拟内容；单冒号:仅用于伪类，双冒号::专用于伪元素，语义强制区分，混用会导致样式失效或解析错误。
伪类只作用于已有 DOM 元素的状态或位置，伪元素则生成渲染层中不可见的新内容；单冒号:是伪类的唯一合法写法，双冒号::才是伪元素的规范标识——这不是风格偏好，而是语义强制区分。
为什么:hover不能写成::hover
因为:hover匹配的是元素当前是否处于悬停状态，它不插入任何新节点，也不修改 DOM 结构。浏览器遇到::hover会直接忽略该规则（Chrome、Firefox、Safari 均如此），因为它不符合伪元素的定义：伪元素必须是可被content驱动、能参与渲染但不进入 DOM 的虚拟片段。
常见错误现象：
- 样式完全不生效，控制台无报错，开发者工具里也看不到该规则被加载
- 在 ESLint 或 Stylelint 中触发
selector-no-vendor-prefix类规则警告（因解析器识别为非法选择器） -
:not(:hover)写成:not(::hover)会导致整个否定条件失效
哪些伪元素必须用::，旧写法:会出问题
CSS3 新增的伪元素从设计之初就只支持双冒号，单冒号写法在部分浏览器中会被静默丢弃：
-
::placeholder：Chrome 和 Firefox 仅响应双冒号形式，:placeholder无效 -
::selection：Safari 16.4+ 开始要求双冒号，旧写法可能只作用于部分文本范围 -
::backdrop（用于<dialog></dialog>）：所有现代浏览器均不接受单冒号
而::before和::after虽仍兼容:before，但若同时声明:before和::before，部分构建工具（如 PostCSS 插件）会去重或报冲突。
:not()里嵌套伪类时，冒号数量必须严格一致
:not()内部只能使用伪类，不能出现伪元素；且所有伪类都必须用单冒号，否则语法不合法：
- ✅ 正确：
a:not(:hover):not(:focus) - ❌ 错误：
a:not(::hover)（解析失败） - ❌ 错误：
a:not(:hover::before)（伪类+伪元素混用，顺序非法）
另外，:not()不支持嵌套另一个:not()，所以像:not(:not(:hover))这种写法虽语法通过，但实际行为不可靠，不同浏览器渲染结果可能不一致。
伪类与伪元素组合使用时，顺序不能颠倒
当需要对某个状态下的伪元素加样式，必须把伪类放在前面、伪元素放在最后：
- ✅ 正确：
button:hover::before - ❌ 错误：
button::before:hover（整个规则被浏览器忽略）
这是因为伪元素本质是“宿主元素的渲染子层”，它没有自己的交互状态；::before本身无法获得:hover——只有宿主button可以。真正容易被忽略的是层叠上下文：一旦button设了position: relative和z-index，它的::before就会成为第一个子 stacking context，此时它和内部其他子元素的层级关系不再由源码顺序决定，而取决于各自的z-index和定位方式。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
