伪类选择器匹配元素的瞬时状态或结构位置而非真实元素，如:hover表示鼠标移入状态、:nth-child(3)判断子元素序号，不新增DOM节点。

伪类选择器不是“选元素”，而是“选状态”

普通选择器（如 div、.btn、#header）匹配的是 DOM 中真实存在的元素；而伪类选择器（如 :hover、:focus、:nth-child(2)）匹配的是**同一个元素在不同条件下的瞬时状态或结构位置**——它不新增节点，也不改变 HTML，只在满足条件时临时生效。

• :hover 不是选“某个叫 hover 的标签”，而是当鼠标移入时，让当前元素临时应用该样式
• :nth-child(3) 不是选第 3 个“独立元素”，而是看它是不是父容器里排第 3 的子元素（不管类型）
• 多个伪类可链式叠加：input:not(:disabled):focus 表示“既没被禁用、又获得焦点的输入框”
• 伪类不支持冒号后加空格：a :hover（带空格）会变成“a 的后代元素悬停”，不是 a 自身悬停

:hover / :focus / :active 的触发逻辑和常见失效原因

这三个是最常误用的动态伪类，失效往往不是写错了，而是违背了浏览器的触发机制。

• :hover 在触摸设备（如 iOS Safari）上默认不触发，除非元素有 cursor: pointer 或监听了 touchstart；移动端建议改用 :active 做点击反馈
• :focus 只对可聚焦元素生效（tabindex ≥ 0 的元素、表单控件、），
  默认无法获得焦点，需加 tabindex="0"

• :active 持续时间极短（毫秒级），仅在鼠标按下/触屏按住期间生效；若想保持“按下态”，得配合 JS 切换 class
• 如果 :focus 样式没反应，检查是否被 outline: none 彻底移除且未提供替代视觉反馈（违反可访问性）

结构性伪类（:first-child、:nth-of-type 等）的匹配逻辑差异

看似相似的伪类，实际匹配规则完全不同，混用会导致意料外的样式漏配或错配。

• p:first-child：只匹配「是父元素第一个子元素」且「标签为 p」的段落 → 若父元素第一个子是

  ，则不匹配任何

  

  EasySite

  零代码AI网站开发工具

  下载

• p:first-of-type：匹配父元素中「第一个出现的 p 元素」，不管前面有没有其他标签 → 更符合“找第一个段落”的直觉
• :nth-child(2n) 按子元素总序号算（偶数位），:nth-of-type(2n) 只按同类型元素序号算（第 2、4、6… 个 p）
• :empty 要求元素内**完全无内容**（不含空格、换行、注释），

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

  匹配，但

  （含空格）不匹配

伪类和伪元素的冒号数量不是兼容写法，而是语义分界线

CSS3 明确规定：伪类用单冒号 :，伪元素用双冒号 ::。这不是“老写法也能用”的兼容问题，而是设计意图的表达。

• a:hover 是伪类 → 描述 a 元素的“悬停状态”
• p::first-letter 是伪元素 → 创建一个虚拟的首字容器，DOM 中并不存在
• 虽然 :before 和 :after 在旧浏览器中允许单冒号，但新伪元素（如 ::marker、::placeholder）必须用双冒号，否则无效
• 混淆写法可能导致未来升级失败：比如把 input::placeholder 写成 input:placeholder，现代浏览器直接忽略

真正容易被忽略的点是：伪类本身不产生新节点，所以无法用 JavaScript 直接查询 :hover 元素；要判断某元素是否处于悬停态，得靠 document.elementFromPoint() 或监听事件，而不是查 CSS 规则。

https://www.php.cn/faq/2015717.html