最常见错误是CSS用.class但HTML漏写class属性；其次混淆后代选择器（空格）与子选择器（>）；再者误用:nth-child与:nth-of-type；还有属性选择器值含特殊字符未加引号。
class 选择器写成 .my-class 但 HTML 中漏了 class 属性
这是最常发生的错位：CSS 里写了 .highlight，HTML 却只写 <div>文字</div>，没加 class="highlight"。浏览器根本不会匹配，样式自然不生效。
检查时建议同步看两处：
• CSS 文件中是否用了正确的点号前缀 .
• 对应 HTML 元素是否真实存在 class 属性，且拼写完全一致（区分大小写）
• 注意空格——class="btn primary" 是两个类，不是 class="btn primary " 这种末尾带空格的写法（虽多数浏览器容错，但部分解析会失败）
后代选择器和子选择器混淆（空格 vs >）
nav a 和 nav > a 看似只差一个符号，行为完全不同：
• nav a 匹配 nav 内任意层级的 a（包括孙子、曾孙）
• nav > a 只匹配 nav 的**直接子元素** a，中间不能隔层
常见错误是想控制导航栏按钮，却用 nav a 导致侧边栏或 footer 里的链接也被误改。调试时可用浏览器开发者工具的“:hover 高亮”功能，逐层确认实际命中的是哪些节点。
立即学习“前端免费学习笔记（深入）”；
:nth-child(n) 和 :nth-of-type(n) 搞反了
两者都按“第几个”筛选，但计算逻辑不同：
• :nth-child(2) 看的是父容器下所有子元素的**位置序号**，不管标签名
• :nth-of-type(2) 只统计**同类型标签**（如所有 p）的序号
例如父元素内顺序是：<h2></h2><p>1</p><div></div><p>2</p>：
• p:nth-child(2) 能匹配第一个 p（它在整体排第二）
• p:nth-child(4) 才能匹配第二个 p（它整体排第四）
• 而 p:nth-of-type(2) 直接匹配第二个 p，更符合直觉
新手常默认用 :nth-child，结果发现“明明是第二个 p 却没生效”，其实是被前面的 h2 或 div 占了位置。
属性选择器中值没加引号导致特殊字符失效
写 [data-status=active] 看似没问题，但如果值含空格、句点、括号等（如 data-status="on hold"），不加引号就会解析失败。
安全做法一律加双引号：
• ✅ [data-role="tooltip"]
• ✅ [aria-label="Close modal"]
• ❌ [aria-label=Close modal]（空格中断解析，变成匹配 aria-label=Close + 文本 modal）
另外注意：属性值区分大小写，[type="submit"] 不会匹配 type="Submit"，除非用 [type="submit" i]（i 表示忽略大小写，但仅部分现代浏览器支持）。
/* 错误示例：值含空格未引号，不生效 */
[data-desc=final version] { color: red; }
<p>/<em> 正确写法 </em>/
[data-desc="final version"] { color: red; }
[data-desc="final-version"] { color: blue; }
[data-desc^="draft"] { opacity: 0.7; }CSS 选择器的“看不见的依赖”往往藏在 HTML 结构和属性值细节里，而不是语法本身。越想靠复杂选择器一步到位，越容易掉进层级、类型、空格、大小写的连环坑里。
