CSS伪类与伪元素如何区分？单冒号与双冒号详解

CSS中伪类与伪元素的根本区别在于：伪类（如:hover、:not）仅反映DOM元素的实时状态或位置，不生成新内容；而伪元素（如::before、::placeholder）则在渲染层创建虚拟节点，插入不可见但可样式化的“幽灵内容”。这种语义差异直接决定了语法规范——单冒号:专属于伪类，双冒号::是伪元素的强制标识，混用不仅违反标准，更会导致样式静默失效、开发者工具不可见、构建工具报错，甚至跨浏览器行为不一致；尤其在:not()嵌套、伪类伪元素组合（如button:hover::before）及现代伪元素（::placeholder、::selection）使用中，冒号数量和顺序一旦出错，样式将彻底失灵。

伪类只作用于已有 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（用于
  ）：所有现代浏览器均不接受单冒号

而::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和定位方式。

到这里，我们也就讲完了《CSS伪类与伪元素如何区分？单冒号与双冒号详解》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！