伪类选状态、伪元素造内容：伪类（如: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 查询到。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• ::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 加过渡动画却忘了它本身不触发重排——这些都源于没分清“状态变更”和“内容生成”的底层逻辑差异。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！