先学元素、类、ID和通配符选择器——这是最短路径；跳过它们直接学伪类或属性选择器，90%新手会在调试时卡在“为什么没生效”上。

先学元素、类、ID 和通配符选择器，这是最短路径——跳过它们直接啃伪类或属性选择器，90% 的新手会在调试时卡在“为什么没生效”上。

从 HTML 结构出发：先用对选择器，再谈样式

新手最容易犯的错，是拿 .button 去匹配一个没写 class="button" 的 元素。所以第一步必须建立“选择器和 HTML 属性严格对应”的直觉：

• p 只匹配所有
  标签，不看 class 或 id
• .intro 只匹配含 class="intro"（或 class="intro highlight"）的任意标签
• #header 必须且只能匹配一个 id="header" 元素；重复 ID 会导致 CSS 生效不可预测
• * 虽然能一键重置所有 margin/padding，但会拖慢渲染——只在 CSS 初始化阶段用，别在组件里滥用

理解层级关系前，先搞清“空格”和“>”的区别

很多新手以为 nav a 和 nav > a 效果差不多，结果改了子菜单样式却把面包屑也变了。关键差异在 DOM 深度：

• nav a：选中 内任意嵌套层级的 （包括 nav > ul > li > a）
• nav > a：只选 的**直接子元素** （通常根本不存在，因为 几乎不会直接放在 下）
• 实际更常用的是 nav > ul > li > a 或 nav .menu-link —— 后者更稳定、可读性更强

属性与伪类别急着堆，先解决“为什么 hover 不生效”

刚接触 a:hover 或 input[type="text"] 时，常见失效原因根本不在语法，而在优先级或 HTML 错误：

• a:hover 被 a { color: #333 !important; } 挡住？删掉 !important，改用 .nav-link:hover 提升优先级
• input[type="email"] 没反应？检查 HTML 是否真写了 type="email"，而不是 type="emai" 或漏了引号
• :nth-child(2) 选不到第二个
• ？可能第一个子元素是 或文本节点——此时该用 :nth-of-type(2)
• 属性选择器如 [data-role="tab"] 对大小写敏感，data-role="Tab" 就不匹配

真正卡住新手的，从来不是选择器种类多，而是不知道浏览器到底选中了哪个元素、为什么没应用那条声明。打开 DevTools 的 Elements 面板，鼠标悬停在 HTML 节点上，看右侧 Styles 栏里哪些规则被划掉、哪些生效——这才是比死记语法更快的进阶方式。