伪类用单冒号:，伪元素用双冒号::，本质是css3为区分“状态选择”与“内容生成”而设的语义边界；现代浏览器均兼容两者，但ie8仅支持单冒号，老ios safari对双冒号有渲染异常；伪元素必须声明content属性才生效，且不进入dom但影响布局与事件流。
伪类和伪元素的语法分界是核心区别
本质不是“写法不同”，而是 CSS3 规范刻意用 :: 划清语义边界：: 专用于伪类（如 :hover、:nth-child()），:: 专用于伪元素（如 ::before、::first-letter）。这个改动不是为了新增功能，而是让开发者一眼区分“选中状态”和“生成内容”两类行为。
浏览器兼容性决定你该用哪个冒号
所有现代浏览器（Chrome、Firefox、Safari、Edge）都同时支持 :before 和 ::before，效果完全一致。但 IE8 只认单冒号，IE9+ 开始支持双冒号；iOS Safari 5.1–6.1 对 ::before 有渲染异常。所以：
- 项目需兼容 IE8 或老 iOS 版本 → 必须用
:before - 纯现代环境（如 Electron、内部管理后台）→ 推荐用
::before，语义更清晰 - 团队已有统一规范 → 优先服从规范，不必为“正确性”强行切换
content 属性缺失会导致伪元素彻底失效
无论用单冒号还是双冒号，::before 和 :before 都强制依赖 content 属性。漏写、写成 content: none 或值为空字符串但没加引号（如 content: ""），都会让伪元素不渲染。常见错误包括：
-
p::before { color: red; }—— 没content，什么都不会出现 -
div:before { content: ; }—— 语法错误，必须是有效值（""、"text"、url(...)等） -
input::before { content: "★"; }——<input>是替换元素，不支持伪元素，直接忽略
伪元素不进 DOM，但会影响盒模型和事件流
::before 生成的是虚拟节点，document.querySelector("p::before") 查不到，getComputedStyle 却能取到它的样式。它参与布局（比如设了 display: block 或 width），也会影响父容器的 line-height 和 padding 计算。更隐蔽的是事件：鼠标悬停在 ::before 区域上，mouseenter 仍会触发到宿主元素，但无法单独给伪元素绑定 click。
真正容易被忽略的点是：伪元素的层叠上下文（stacking context）由宿主元素决定，而不是独立创建；若宿主元素没设 position 或 z-index，伪元素的 z-index 设置无效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
