选择器：在 HTML 里精准点外卖

11-25 85 0 0

【总览】

阅读提示：800 字左右，地铁两站刚好；学不会你来打我，我提前下车。

一、开场白：为什么需要选择器？

上集我们给网页套了件“全员同款”文化衫，老板看完沉默两秒：
“我要的是‘董事长’穿高定，‘打工人’穿工服，别搞平均主义！”
于是 CSS 选择器登场——精准投喂样式，指谁打谁，绝不误伤。

二、选择器全家福（先认脸，再下锅）

名称	写法	白话翻译	吐槽
元素选择器	`p { }`	所有 `<p>` 一起锤	一棍子打死一船人，效率最高，误伤最大
类选择器	`.title { }`	只要 `class="title"` 的都上车	像公司工牌，谁戴谁享受
ID 选择器	`#header { }`	页面唯一真神	身份证，理论上只能有一个，别搞分身
后代选择器	`nav a { }`	nav 里的所有 a，一个都跑不了	家族连坐，祖孙三代全算上
子选择器	`ul > li { }`	只亲儿子，领养不算	亲妈认证，隔壁老王的孩子不收
相邻兄弟	`h1 + p { }`	h1 下面紧挨着的那个 p	像插队，必须贴贴，隔一人就翻脸
属性选择器	`input[type="text"] { }`	专挑 text 文本框	点外卖备注“不要香菜”，精准到位

三、实战：给不同人穿不同衣

HTML 先摆好群众演员：

<header id="header">董事长专用区</header>
<nav>
  <a href="#">首页</a>
  <a href="#">关于</a>
</nav>
<article>
  <h1 class="title">如何优雅地摸鱼</h1>
  <p>第一招：显示器背对门口</p>
  <p>第二招：IDE 主题换成 Excel 绿</p>
</article>

CSS 精准点单：

/* 董事长高定 */
#header {
  background: gold;
  font-size: 2rem;
  padding: 1rem;
}

/* 工牌组统一制服 */
.title {
  color: #ff0055;
  border-left: 5px solid;
  padding-left: 0.5rem;
}

/* nav 里的链接才配拥有 hover */
nav a:hover {
  color: lime;
  transition: 0.3s;
}

/* 只锤第一个 p，杀鸡儆猴 */
h1 + p {
  font-weight: bold;
  background: rgba(0,255,0,.1);
}

效果：

header 金碧辉煌，自带 BGM；
标题左侧骚粉条，远看像律所，近看像夜店；
鼠标移到 nav 链接，一秒变绿巨人；
第一招摸鱼技巧高亮加粗，仿佛在说“学会没？”

四、优先级小课堂——谁嗓门大听谁的

CSS 冲突时，浏览器按“权重”拍板：

行内样式 style="" —— 皇帝御笔，1000 分
ID 选择器 —— 正二品，100 分
类/属性/伪类 —— 从四品，10 分
元素选择器 —— 九品芝麻官，1 分

记住口诀：
“行内 ID 类元素，谁分高谁牛逼；分数一样后写的赢，别跟层叠耍脾气。”

五、常见沙雕错误合集

错误示范	下场
`.<p>{}` 多打了个点	浏览器直接当没看见，样式蒸发
同一页面俩 `id="header"`	浏览器不会爆炸，但 JS 会懵，调试两行泪
写 `.nav a` 想选 `nav` 里的 `a`，结果 HTML 写的是 `<div class="nav">`	选了个寂寞，样式全军覆没
忘记写 `{}`	整段 CSS 罢工，像忘给猫罐头，主子转身不理你

六、互动时间——读者闯关

把下面这段 HTML 改成“只让‘确认’按钮变绿，取消按钮保持默认”：

<div class="actions">
  <button class="btn">确认</button>
  <button class="btn">取消</button>
</div>

要求：

不能动 HTML 结构；
只能用 CSS；
绿色代码 #52c41a。

想到方案就发评论区，格式：“我用的是 __ 选择器”。
答对的小伙伴，下集把你的 ID 挂在“靓仔墙”，并附赠“摸鱼许可证”电子版一张！

七、下集预告

衣服挑人穿了，但尺码还是全员 XL——字体、颜色、间距依旧乱成一锅粥。
下一篇《颜色与字体：如何让你的网站看起来像“设计师”而不是“设计师他弟”》，
带你把“高定”从路边摊升级成巴黎时装周。别走开，系列文持续投喂！

（完）

快来点个赞吧

编程知识