伪类选状态、伪元素造内容：伪类（如:hover）筛选已有DOM元素的状态，不新增节点；伪元素（如::before）生成虚拟节点并需content属性，不在DOM中且不可被JS选取。
伪类选状态，伪元素造内容——这是最直接的判断依据。写错冒号数量（: vs ::）只是表象，真正翻车是因为混淆了“筛选已有元素”和“生成虚拟节点”这两件事。
伪类是状态筛选器，不新增任何 DOM 节点
伪类如 :hover、:focus、:nth-child() 都只作用于真实存在的元素，只是加了一层条件判断。它不会插入内容，也不改变结构。
-
:hover选中的仍是那个button标签本身，只是在悬停时应用样式 - 多个伪类可叠加，比如
a:hover:visited:focus合法（尽管语义上可能矛盾） -
:link和:visited必须按顺序声明，否则:visited可能被浏览器忽略 -
:first-child匹配的是父元素的第一个子元素，不管它是不是div或p；而:first-of-type才关心标签类型
伪元素是内容生成器，必须用双冒号且不可叠加
伪元素如 ::before、::first-line、::placeholder 的本质是在渲染层插入一个抽象节点，它不在 DOM 中，也无法通过 JavaScript 查询到。
-
::before和::after必须配合content属性使用，否则不渲染 - 一个选择器只能有一个伪元素，但
::before和::after算两个独立伪元素，可以共存 -
::selection在 Firefox 中需写成::-moz-selection才生效 -
::first-letter和::first-line只对块级容器生效，对span这类内联元素无效
为什么 :not() 是伪类，而 ::placeholder 是伪元素？
看它操作的对象：如果目标是“某个状态下的真实元素”，就是伪类；如果目标是“元素里某段不可见/不可直接写入的内容”，就是伪元素。
立即学习“前端免费学习笔记（深入）”；
-
:not(.disabled)排除已存在的、带disabled类的元素 → 操作对象是元素本身 → 伪类 -
input::placeholder的 placeholder 文本根本不在 HTML 里，是浏览器动态生成的 → 伪元素 -
div::before { content: "→" }——content是伪元素专属属性，伪类不能用，这是最直接的判别依据
最容易被忽略的不是语法写错，而是误以为 ::before 能响应点击事件，或给 :hover 加过渡动画却忘了它本身不触发重排——这些都源于没分清“状态变更”和“内容生成”的底层逻辑差异。
