CSS 选择器：从“指名道姓”到“海王钓鱼”

学完你就能：

• 想改谁改谁，不改的绝不误伤
• 再也不用 !important 当创可贴
• 面试被问“优先级”时能假装淡定

1. 先来点心理建设

CSS 选择器 = 给 HTML 元素发“身份牌”，样式只发给带牌的人。
发牌方式越精准，代码越省、跑得越快、维护越不骂娘。

2. 基础三宝（99% 场景够用）

#nav { background: #000; }     /* 导航条黑底 */
.btn  { color: #fff; }        /* 按钮字白 */
div   { margin: 0 auto; }     /* 所有 div 居中（慎用） */

3. 组合套路——“而且、或者、内部”

3.1 而且：连写

button.btn.primary { background: blue; }
/* 必须是 button，同时有 .btn 和 .primary */

3.2 或者：逗号

h1, h2, h3 { color: red; }
/* h1 或 h2 或 h3 都红 */

3.3 内部：空格（后代）

#nav a { text-decoration: none; }
/* #nav 里的所有 a 标签 */

3.4 亲儿子：>（直接子代）

#nav > li { margin-left: 20px; }
/* 只有 #nav 下一级的 li，孙子不管 */

3.5 隔壁老王：+（相邻兄弟）

input + label { color: green; }
/* 紧跟着 input 后面的那个 label */

3.6 后面所有兄弟：~

input:checked ~ .content { display: block; }
/* 选中复选框后，同一爸爸下的 .content 全出来 */

4. 属性选择器——“按属性钓鱼”

a[target="_blank"] { color: orange; }    /* 新开窗口的链接 */
img[src$=".webp"]   { border: 1px solid; } /* 以 webp 结尾的图片 */
input[disabled]    { opacity: .5; }      /* 带 disabled 属性的输入框 */

常用符号：

• = 完全匹配
• ^= 开头
• $= 结尾
• *= 包含

5. 伪类——“状态怪”

a:hover     { color: pink; }   /* 鼠标放上去 */
button:disabled { cursor: not-allowed; }
li:first-child  { font-weight: bold; }
input:focus     { outline: 2px solid lime; }

LVHA 顺口溜：“LoVe HA”
a:link → a:visited → a:hover → a:active
顺序写错，样式会抽风。

6. 伪元素——“虚拟小配件”

p::before   { content: "🚀 "; }   /* 段首加火箭 */
p::after    { content: " ❤"; }   /* 段尾加心心 */
::selection { background: yellow; } /* 高亮选中文本 */

注意：伪元素用双冒号 :: 是新标准，单冒号也能用，但双冒号更装逼。

7. 优先级（Specificity）——“谁嗓门大听谁的”

千位-百位-十位-个位 记分法：

• 行内样式 style="" → 1000
• ID → 100
• class/属性/伪类 → 10
• 元素/伪元素 → 1

例子：

#nav .btn:hover::after { content: "!" }  /* 1 ID + 1 class + 1伪类 + 1伪元素 = 121 分 */

口诀：
“ inline 压死 id，id 压死 class，class 压死标签，一样分后面覆盖前面。”
别再动不动就 !important，那玩意儿相当于核弹，炸完自己也残。

8. 一张图总结（保存当壁纸）

┌──────────────┬──────────────┬──────────────┐
│  选择器类型   │  示例         │  权重        │
├──────────────┼──────────────┼──────────────┤
│ 行内          │ style=".."   │ 1000         │
│ ID            │ #nav         │ 100          │
│ class/伪类    │ .btn:hover   │ 10           │
│ 元素/伪元素   │ div::before  │ 1            │
└──────────────┴──────────────┴──────────────┘

9. 实战小练习（3 分钟）

HTML：

<nav id="nav">
  <ul>
    <li><a href="/" class="btn primary">首页</a></li>
    <li><a href="/about" class="btn">关于</a></li>
  </ul>
</nav>

目标：

1. 导航条黑底白字
2. 鼠标放链接上变粉红
3. 当前页按钮（.primary）蓝底白字

CSS：

#nav        { background: #000; }
#nav a       { color: #fff; }
#nav a:hover { color: pink; }
#nav .primary{ background: blue; color: #fff; }

10. 彩蛋：最常被忘记的“万能选中”

*, *::before, *::after { box-sizing: border-box; }

写项目先扔这句，布局bug少一半。

结束语

选择器写得好，样式写得少，头发掉得慢。
去 CodePen 或者 JSFiddle 亲手试一圈，比再看十篇文章都香。祝你再也不被“样式为啥不生效”折磨到秃头！