:first-child等伪类失效主因是误认“首个子元素”即匹配，实则要求目标元素必须是父元素第一个子节点且类型一致；:first-of-type更可靠，按类型独立计数；伪元素需显式设content才渲染，否则静默失效。
伪类选择器不匹配目标元素的常见陷阱
伪类如 :first-child、:last-child、:nth-child(n) 失效，往往不是语法错，而是对“兄弟节点类型”的理解偏差。它们先找父元素的所有子元素，再按序号/条件筛选——但只认**同类型标签**。
例如：p:first-child 要求目标 <p> 必须是其父元素的**第一个子节点且是 <p> 标签**；如果父元素第一个子节点是 <div>，那这条规则就完全不触发。
-
:first-of-type和:last-of-type更可靠：它们按元素类型分别计数，不苛求“第一个子节点” -
:nth-child(2)匹配的是“父元素中第 2 个子节点”，不管它是不是p；而:nth-of-type(2)匹配的是“父元素中第 2 个p元素” - 检查 Elements 面板里目标元素的父节点 DOM 结构，手动数一遍子节点顺序和类型，比猜更准
伪元素样式不显示的三个静默原因
::before 和 ::after 最容易“写了等于没写”，因为它们默认不渲染——必须显式设置 content 属性。
- 没写
content: ""或content: "text"→ 元素完全不会生成，Styles 面板里都看不到该规则 -
content值为空字符串但忘了加引号（如写成content: ;）→ 整条 CSS 规则语法错误，后续所有声明可能被浏览器跳过 - 伪元素设置了
display: none或父元素有overflow: hidden且伪元素溢出 → 它存在，但被视觉隐藏了
伪类状态不触发的真实场景限制
某些伪类依赖用户交互或浏览器策略，并非总能自由生效：
立即学习“前端免费学习笔记（深入）”；
-
:hover在触摸设备（如 iPad、安卓手机）上无 hover 状态，除非用@media (hover: hover)包裹 -
:focus只对可聚焦元素（tabindex≥ 0、<input>、<button>等）有效；<div>默认不可聚焦，需加tabindex="0" -
:visited在 Chrome/Firefox 中仅允许修改极少数属性（color、background-color、border-color等），设display或transform会被忽略
开发者工具里怎么快速验证伪类/伪元素是否生效？
别靠肉眼等交互，直接在 Elements 面板里强制触发状态：
- 右键目标元素 → “Force state” → 勾选
:hover、:focus、:active，看样式是否立刻出现 - 在 Styles 面板中找到
::before或::after规则，手动勾选/取消content值，观察是否生成对应伪元素 - 切换到 Computed 面板，搜索
content或display，确认伪元素的计算值是否为block（或你设的值）且未被覆盖
伪类和伪元素的问题，大多卡在“它根本没进入匹配流程”或“它生成了但你看不见”。重点不是调样式，而是先确认它有没有被浏览器解析、有没有被创建、有没有被渲染。
