伪类用单冒号（如:hover），匹配元素状态或位置而不创建新节点；伪元素用双冒号（如::before），生成渲染节点但不进入DOM。二者核心区别在于“选中”还是“插入”。
伪类和伪元素的语法区别一眼就能分辨
伪类用单冒号 :，比如 :hover、:nth-child(2)；伪元素用双冒号 ::，比如 ::before、::first-line。这是最直观的区分方式——但注意，老写法如 :before 仍被浏览器支持（为兼容性可接受），而 :first-letter 这类本就是伪元素，写成单冒号属于历史遗留，不是伪类。
伪类匹配的是元素的「状态或位置」，不是新节点
它不创建 DOM 节点，只是给符合条件的现有元素加样式。比如：
-
:disabled匹配所有禁用的<button></button>或<input> -
:nth-of-type(odd)匹配父容器中奇数位置的同类型元素（如第 1、3、5 个<p></p>） -
:focus-within匹配自身或其任意子元素获得焦点的容器
这些都不会在 HTML 中插入任何内容，只是条件筛选器。如果你发现加了 :hover 没反应，先确认元素是否可交互（比如 <div> 默认无 <code>tabindex，可能无法触发 :focus）。
伪元素创建的是「文档树之外的渲染节点」
它生成的内容不可选、不参与 DOM 查询（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></p> -
p::first-letter→ 选中所有<p></p>的首字母（只对块级元素生效）
伪元素不能复合使用（p::first-letter::before 无效），也不能链式写（div:hover::before 合法，但 div::before:hover 不合法——伪元素本身没有 hover 状态）。
