伪类选择器匹配元素的瞬时状态或结构位置而非真实元素，如: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 的元素、表单控件、<a href></a>），<div> 默认无法获得焦点，需加 <code>tabindex="0" -
:active持续时间极短（毫秒级），仅在鼠标按下/触屏按住期间生效；若想保持“按下态”，得配合 JS 切换 class - 如果
:focus样式没反应，检查是否被outline: none彻底移除且未提供替代视觉反馈（违反可访问性） -
p:first-child：只匹配「是父元素第一个子元素」且「标签为 p」的段落 → 若父元素第一个子是<h2></h2>，则不匹配任何<p></p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/ai/2637" title="零沫AI工具导航"><img src="https://img.php.cn/upload/ai_manual/001/246/273/6971ffb5a3df5794.png" alt="零沫AI工具导航" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a href="/ai/2637" title="零沫AI工具导航">零沫AI工具导航</a> <p>零沫AI工具导航-AI导航新标杆,探索全球实用AI工具</p> </div> <a href="/ai/2637" title="零沫AI工具导航" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> -
p:first-of-type：匹配父元素中「第一个出现的 p 元素」，不管前面有没有其他标签 → 更符合“找第一个段落”的直觉 -
:nth-child(2n)按子元素总序号算（偶数位），:nth-of-type(2n)只按同类型元素序号算（第 2、4、6… 个 p） -
:empty要求元素内**完全无内容**（不含空格、换行、注释），<p></p>匹配，但<p> </p>（含空格）不匹配 -
a:hover是伪类 → 描述 a 元素的“悬停状态” -
p::first-letter是伪元素 → 创建一个虚拟的首字容器，DOM 中并不存在 - 虽然
:before和:after在旧浏览器中允许单冒号，但新伪元素（如::marker、::placeholder）必须用双冒号，否则无效 - 混淆写法可能导致未来升级失败：比如把
input::placeholder写成input:placeholder，现代浏览器直接忽略
结构性伪类（:first-child、:nth-of-type 等）的匹配逻辑差异
看似相似的伪类，实际匹配规则完全不同，混用会导致意料外的样式漏配或错配。
伪类和伪元素的冒号数量不是兼容写法，而是语义分界线
CSS3 明确规定：伪类用单冒号 :，伪元素用双冒号 ::。这不是“老写法也能用”的兼容问题，而是设计意图的表达。
立即学习“前端免费学习笔记（深入）”；
真正容易被忽略的点是：伪类本身不产生新节点，所以无法用 JavaScript 直接查询 :hover 元素；要判断某元素是否处于悬停态，得靠 document.elementFromPoint() 或监听事件，而不是查 CSS 规则。
