语法与选择器 — 一条规则的结构和「选中谁」的艺术Copy Anchor Link

这一章讲两件事: 一条 CSS 规则由哪几个零件组成、每个零件写什么; 以及最重要的技能——怎么只选中你想动的那几个元素,不牵连别人。 读完你能看懂任何一条 CSS 规则,也能自己写出精准的选择器。 需要的基础:已经知道 CSS 和 HTML 的分工(本拆解 01 章)。

1. 这一章讲什么Copy Anchor Link

上一章解决了「样式写在哪」(单独文件)。这一章解决「怎么写」和「写给谁」: CSS 的全部语法其实只有一条规则那么长;真正的关卡是选择器—— 页面上元素成百上千,你必须有本事只说「就这三个卡片」。 它在全书链条里的位置:第 ② 级台阶。 从这一章起,每个练习都要同时写一个 HTML 文件和一个 CSS 文件。

2. 顶层全景:一条规则的两个部分Copy Anchor Link

  p  {  color: blue;  font-size: 16px;  }
  └┬┘   └────────────────────────────┘
  选择器        声明块(花括号括起来)
                  每条声明 = 属性 : 值 ;

  图说:选择器回答「动谁」,声明块回答「怎么动」。
  整个 CSS 语言 = 这一条骨架的无限重复。

3. 核心原理Copy Anchor Link

零件逐个拆Copy Anchor Link

书里把 p { color: blue; font-size: 16px; } 这条规则拆成一张零件表¹:

两条容易绊倒新手的规矩,书里用一句带过、值得放慢:

• 一条声明 = 属性: 值; 三件套,冒号分号缺一不可——漏了分号,浏览器会把后一条声明并进前一条,整条规则静默失效;
• 同一个选择器下可以堆任意多条声明,用分号隔开²。 16px 里的 px 是像素(屏幕上的最小色点),第 03 章会讲字号单位时展开。

三种选择器:从「一类全选」到「指名道姓」Copy Anchor Link

选择器告诉浏览器:页面的哪一部分要应用这条规则³。书里给了初学者最要紧的三种。

① 元素选择器——按类型选。 写元素的名字,选中页面上所有这种元素:

h1 { color: purple; }

页面上有几个 <h1> 标题,就几个全变紫⁴。最省事,也最粗暴——「所有」意味着你没法只染其中某一个。

② 类选择器——按标记选,可复用。 HTML 元素可以带一个 class 属性,相当于给自己贴标签;CSS 里用点号加类名选中所有贴了同一标签的元素:

<p class="highlight">This is special text.</p>

.highlight { background-color: yellow; }

效果是:凡是 class="highlight" 的元素,背景变黄——不管它是 <p>、<div> 还是别的什么⁵。 关键性质书里单独点出:类可以在多个元素上重复使用⁶。 想再加一个高亮段落?HTML 里照抄 class="highlight" 即可,CSS 一个字不用改。

③ ID 选择器——按身份证号选,一个页面只许一个。 HTML 元素还可以带 id 属性,相当于身份证号;CSS 里用井号加 ID 名选中那一个元素:

<p id="intro">Welcome to my website.</p>

#intro { font-style: italic; }

效果只有这一个段落变斜体。书里给 ID 立了条规矩:ID 应当唯一——每页只用一次⁷。

为什么默认用类、慎用 ID? 把三种选择器排在一起就看清了⁸:

ID 的「唯一」不只是礼貌——上一章讲过层叠:越具体越赢,而 ID 比类更具体。 一旦用 ID 写了样式,后来想在别处复用或覆盖它,都会撞上它的高优先级,想改都费劲。 类是「可复用的样式」,ID 是「这一个元素的身份」——拿身份当样式用,是自找冲突。 (「ID 优先级更高」这层推理是我们补的,书里只给了「唯一」的规矩和「类灵活」的结论。)

组合选择器:一句话说更细Copy Anchor Link

两种基本组合,书里各给了一个例子⁹:

组合一:空格——「里面的」。 div p 选中所有位于 <div> 里的 <p>, 不在任何 <div> 里的 <p> 不受影响。这把「选谁」的精度从「全页」收到了「某容器内」。

组合二:逗号——「一起」。 h1, h2, h3 一次选中三种标题, 给它们同一条声明(比如同一款字体),不用写三遍。

主线例子:一个页面,三条规则,各自命中谁Copy Anchor Link

本章的主线例子是书末的练习。两个文件,我们从「浏览器逐元素对号入座」的角度走一遍:

index.html:

<body>
  <h1 id="main-title">Welcome!</h1>
  <p class="highlight">This text is highlighted.</p>
  <p>This text is normal.</p>
</body>

style.css:

/* 元素选择器 */
p {
  font-family: Arial;
  color: #333;
}
/* 类选择器 */
.highlight {
  background-color: yellow;
  font-weight: bold;
}
/* ID 选择器 */
#main-title {
  color: navy;
  font-size: 36px;
}

浏览器读到每个元素时的推理:

这个例子上的每一步都有一条机制在运转: 一个元素可以同时被多条规则命中(第 2、3 行),不冲突的声明全部生效、冲突的按层叠分胜负(01 章); 类规则只影响贴了这个类的元素,加一个新的 <p class="highlight">,它自动获得黄底加粗——这就是「可复用」三个字在页面上的样子。

4. 作者的判断与证据Copy Anchor Link

这一章的判断集中在「好习惯」清单里,属于作者的经验之谈而非可验证的事实—— 书里自己也把这一节标题写成「Start Good Habits Early!」(趁早养好习惯)¹⁰:

1. 可复用的样式用类,别用内联或 ID;
2. 类名要有描述性:.a1、.blue 是反例,.main-button、.error-message 是正例;
3. 相似的样式归拢在一处写,保持文件有组织;
4. 项目超过一个页面,样式就放单独文件(呼应 01 章的外部写法)。

其中第 2 条值得多说一句为什么:.blue 这类名字把「长相」焊死在名字里—— 哪天按钮从蓝改成绿,名字就撒谎了;.main-button 说的是「角色」, 颜色随便改,名字永远成立。(这条理由是书里「Be descriptive」一句的展开,是我们补的。)

5. 边界与局限Copy Anchor Link

• 选择器远不止三种。 属性选择器、通配符、伪类(:hover 那一家,第 03 章会见到)都能当选择器用; 本书只教三件武器——对初学者够用,但读别人的代码时会撞见没见过的写法,届时查 MDN 即可。
• 「组合」只有两种教了。 其实还有「紧挨着的孩子」「紧挨着的弟弟」等关系型组合(如 div > p、h1 + p); 书里只用了空格和逗号。
• 优先级没有量化。 和 01 章一样,ID > 类 > 元素这条「越具体越赢」是直觉版; 本书全篇没有给优先级(specificity)的计分规则。
• font-family: Arial 没写备用字体。 这个练习里的写法在第 03 章会被作者自己修正为「必须带备用」—— 两章的口径差异原书没有解释,以第 03 章为准。

6. 可带走的Copy Anchor Link

本章主线例子,一行写完: 一个 <h1 id="main-title"> 加两个 <p>(其一带 class="highlight") → 三条规则分别按「元素 / 类 / ID」命中 → 标题藏青 36px,第一个段落黄底加粗, 第二个段落只继承元素规则——同一个元素可同时吃多条规则,类的那份可以无限复制给新元素。

1. CSS 全部语法 = 选择器 + 花括号包着的声明块;一条声明 = 属性: 值;;
2. 三种基本选择器:元素(p,全部命中)、类(.highlight,可复用,默认选它)、ID(#intro,一页一个,别拿它写样式);
3. 一个元素可以被多条规则同时命中,不冲突的声明全部生效,冲突的按层叠分胜负;
4. 空格组合 = 「里面的」(div p);逗号组合 = 「一起」(h1, h2, h3);
5. 类名起角色名(.error-message),别起长相名(.blue)——长相会变,角色不会;
6. 项目一超过一个页面,样式立刻搬去单独的 .css 文件。

7. 原文地图Copy Anchor Link