先学元素、类、ID和通配符选择器——这是最短路径；跳过它们直接学伪类或属性选择器，90%新手会在调试时卡在“为什么没生效”上。
先学元素、类、ID 和通配符选择器，这是最短路径——跳过它们直接啃伪类或属性选择器，90% 的新手会在调试时卡在“为什么没生效”上。
从 HTML 结构出发：先用对选择器，再谈样式
新手最容易犯的错，是拿 .button 去匹配一个没写 class="button" 的 <button></button> 元素。所以第一步必须建立“选择器和 HTML 属性严格对应”的直觉：
-
p只匹配所有<p></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></nav>内任意嵌套层级的<a></a>（包括nav > ul > li > a） -
nav > a：只选<nav></nav>的**直接子元素**<a></a>（通常根本不存在，因为<a></a>几乎不会直接放在<nav></nav>下） - 实际更常用的是
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)选不到第二个<li>？可能第一个子元素是<div> 或文本节点——此时该用 <code>:nth-of-type(2) - 属性选择器如
[data-role="tab"]对大小写敏感，data-role="Tab"就不匹配
真正卡住新手的，从来不是选择器种类多，而是不知道浏览器到底选中了哪个元素、为什么没应用那条声明。打开 DevTools 的 Elements 面板，鼠标悬停在 HTML 节点上，看右侧 Styles 栏里哪些规则被划掉、哪些生效——这才是比死记语法更快的进阶方式。
