伪类修饰元素状态，不新增DOM节点；伪元素创建虚拟内容片段，需content属性。:nth-child按子元素顺序匹配，:nth-of-type按同类型元素匹配。LVHA顺序为规范强制要求，伪类须前置伪元素。

伪类和伪元素根本不是一回事，别混着用

伪类（如 :hover、:focus）选的是“已有元素的某种状态”，它不新增任何 DOM 节点；伪元素（如 ::before、::first-letter）选的是“文档里没有、但你可以样式化的虚拟部分”，本质是插入或定位内容片段。

• :nth-child(2) 是结构伪类——它看的是父元素下所有子元素的顺序，不管类型，第 2 个子元素是 <span></span> 还是 <div> 都算 <li> <code>:nth-of-type(2) 是类型伪类——它只数同为 p 的兄弟，跳过 div、h3 等其他标签
• ::before 必须配 content 属性才生效，空字符串 content: "" 也行；而 :before（单冒号）虽能用，但属于 CSS2 写法，语义模糊，容易和伪类混淆
• 浏览器兼容性上，::placeholder 是伪元素，但 IE 只认 :placeholder（单冒号），现代项目建议用 Autoprefixer 或单独加一层降级

表单交互样式必须按顺序写，否则失效

:link → :visited → :hover → :active 这个 LVHA 顺序不是建议，是规范强制要求。如果把 a:hover 放在 a:link 前面，悬停时样式可能完全不触发。

• 表单控件也一样：:disabled 和 :focus 可以共存，但 input:disabled:focus 永远不会匹配——因为禁用元素无法获得焦点，这个组合逻辑上就矛盾
• :required::after 这种“伪类+伪元素”链式写法合法，但要注意：伪类必须写在伪元素前面，::after:required 是无效语法
• 移动端 :focus 行为不稳定，iOS Safari 默认不给非可聚焦元素（如 div）加 focus 样式，需加 tabindex="0"

伪元素 content 属性的坑比想象中多

content 看似简单，实则限制极多：只能用于 ::before 和 ::after，不能用于 ::first-line 或 ::selection；值必须是字符串、属性值或计数器，不能是 HTML 片段或 JS 表达式。

• content: attr(data-tip) 可读取自定义属性，但如果 data-tip 为空或不存在，结果是空字符串，不是 undefined —— 别指望靠它做条件渲染
• 图标字体（如 Font Awesome）用 content: "\f00c" 时，必须确保 font-family 和 font-weight 正确，否则显示成方块或问号
• ::after 清浮动（.clearfix::after { content: ""; display: table; clear: both; }）至今有效，但 Flex/Grid 布局下已无必要，强行加反而干扰布局流
• content 不支持百分比、em 等相对单位，只能用绝对单位（px）、attr() 或字符串

结构性伪类在真实 DOM 中常被忽略的细节

:first-child 和 :last-child 容易误判，它们认的是“父元素下的第一个/最后一个子节点”，哪怕中间夹着注释、文本节点（比如换行空格）都可能导致匹配失败。


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

立即学习“前端免费学习笔记（深入）”；

• p:first-of-type 更可靠——它只找父元素内第一个 p，不管前面有没有 div 或注释
• :empty 匹配的是“连空白符都没有”的元素，<p> </p>（含空格）或 <p>\n</p>（含换行）都不算空，得用 JS trim 后判断才准
• :not(:first-child) 可以排除首项，但 :not(.active, .disabled) 在旧版 Safari 中不支持多参数，得拆成两个 :not()
• :is() 和 :where() 是现代替代方案，比如 h2:is(:first-child, .intro)，但 IE 完全不支持，需评估目标环境
伪元素创建的是视觉层的东西，改不了 DOM 结构；伪类只是“临时贴标签”，不影响元素本身。真正难的不是记住语法，而是想清楚：你到底要修饰“状态”，还是“内容片段”——选错类型，后面所有样式都会跑偏。