伪类用单冒号（如:hover），匹配元素状态或位置而不创建新节点；伪元素用双冒号（如::before），生成渲染节点但不进入DOM。二者核心区别在于“选中”还是“插入”。
伪类和伪元素的语法区别一眼就能分辨
伪类用单冒号 :，比如 :hover、:nth-child(2)；伪元素用双冒号 ::，比如 ::before、::first-line。这是最直观的区分方式——但注意，老写法如 :before 仍被浏览器支持（为兼容性可接受），而 :first-letter 这类本就是伪元素，写成单冒号属于历史遗留，不是伪类。
伪类匹配的是元素的「状态或位置」，不是新节点
它不创建 DOM 节点，只是给符合条件的现有元素加样式。比如：
-
:disabled匹配所有禁用的或 -
:nth-of-type(odd)匹配父容器中奇数位置的同类型元素（如第 1、3、5 个） -
:focus-within匹配自身或其任意子元素获得焦点的容器
这些都不会在 HTML 中插入任何内容，只是条件筛选器。如果你发现加了 它生成的内容不可选、不参与 DOM 查询（ 立即学习“前端免费学习笔记（深入）”； 想对某个按钮的悬停态改背景？用 伪元素不能复合使用（:hover 没反应，先确认元素是否可交互（比如 tabindex，可能无法触发 :focus）。
伪元素创建的是「文档树之外的渲染节点」
document.querySelector('::before') 会报错），但能被 CSS 控制。常见用途：
::before 和 ::after 必须配合 content 属性，否则不渲染；值可以是字符串、attr()、图片或空 ''
::selection 只作用于用户高亮的文字，不支持所有 CSS 属性（仅限 color、background-color、text-shadow 等少数几个）::placeholder 样式输入框提示文字，但各浏览器前缀不同：::-webkit-input-placeholder、::-moz-placeholder（已废弃）、::placeholder（标准）input::placeholder {
color: #999;
font-style: italic;
}
该用哪个？看你要「选中什么」还是「插入什么」
:hover（伪类）。想在段落开头加个装饰性图标？用 ::before（伪元素）。混淆常发生在 :first-child 和 ::first-letter 这类名字相近的场景：
p:first-child → 选中作为父元素第一个子元素的
p::first-letter → 选中所有 的首字母（只对块级元素生效）p::first-letter::before 无效），也不能链式写（div:hover::before 合法，但 div::before:hover 不合法——伪元素本身没有 hover 状态）。
