伪类选状态，伪元素造内容：伪类如:hover作用于DOM中已有元素，不新增节点；伪元素如::before生成渲染层可见但不在DOM中的抽象节点，必须用双冒号且每个选择器限一个。
伪类和伪元素根本不是同一类东西：一个选“状态”，一个造“内容”。混淆它们，轻则样式不生效，重则调试半天找不到原因。
伪类是状态筛选器，不是新元素
伪类（如 :hover、:nth-child()、:focus）只对**已存在且在 DOM 中的元素**起作用，它不添加任何节点，只是加一层条件判断。比如 a:hover 选中的仍是那个 <a> 标签本身，只是在鼠标悬停时应用样式。
- 可叠加多个，如
button:hover:active:focus合法（虽然实际意义有限） - 必须紧跟在基础选择器后，不能单独写
:hover -
:link和:visited必须按顺序声明（:link在前），否则:visited可能被忽略 - 结构伪类如
:first-child匹配的是“父元素的第一个子元素”，和元素类型无关；而:first-of-type才关心类型
伪元素是虚拟内容生成器，必须用双冒号
伪元素（如 ::before、::first-line）本质是插入一个**不在 DOM 中、但渲染层可见的抽象节点**。它不是选中已有部分，而是凭空“造”出一块可样式化的区域。
- CSS3 规范强制要求用双冒号
::，单冒号:是旧语法兼容写法，仅限于浏览器向后支持，不推荐新项目使用 - 每个选择器最多只能有一个伪元素，
p::before::first-line是无效语法；但p::before和p::after可共存（它们算两个独立伪元素） -
::first-letter和::first-line只对块级容器生效，对<span>这类内联元素无效 -
::selection不支持所有属性，仅限color、background-color等少数几个，且 Firefox 需要::-moz-selection
为什么 :not() 是伪类，而 ::placeholder 是伪元素？
看它操作的对象：如果目标是“某个状态下的真实元素”，就是伪类；如果目标是“元素里某段不可见/不可直接写入的内容”，就是伪元素。
立即学习“前端免费学习笔记（深入）”；
-
:not(.disabled)—— 排除已存在的、带disabled类的元素，操作对象是元素本身 → 伪类 -
input::placeholder——placeholder文本根本不在 HTML 里，是浏览器渲染时动态生成的文本片段 → 伪元素 -
div::before { content: "→" }——content属性是伪元素专属，伪类不能用 → 直接判别依据
最容易翻车的地方不是语法写错，而是误以为 ::before 能响应点击事件，或给 :hover 加过渡动画却忘了它本身不触发重排——这些都源于没分清“状态变更”和“内容生成”的底层逻辑差异。
