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

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

1. 这一章讲什么¶

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

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

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

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

3. 核心原理¶

零件逐个拆¶

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

零件	这个例子里的样子	它管什么
选择器	`p`	动谁:所有 `<p>` 标签
属性	`color`、`font-size`	动外观的哪一方面(颜色、字号)
值	`blue`、`16px`	把它调成什么样
花括号 `{}`	包住中间全部内容	声明块的范围:从属于这个选择器的所有声明
冒号 `:`	属性和值之间	左边是名字,右边是取值
分号 `;`	每条声明末尾	一条声明到此为止,下一条开始

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

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

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

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

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

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? 把三种选择器排在一起就看清了⁸:

选择器	写法	选中范围	复用性
元素	`p`	所有 `<p>`	不精准
类	`.my-class`	所有带这个类的元素	可复用,任意多个
ID	`#my-id`	那一个元素	钉死,不可复用

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

组合选择器:一句话说更细¶

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

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

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

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

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

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;
}

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

读到	样式表里有几条管它的规则	最终样子
`<h1 id="main-title">`	元素选择器 `p` 不命中;类 `.highlight` 不命中;ID `#main-title` 命中	藏青色(navy)、36px 大字的标题——它同时也继承了 `body` 的全局设置
`<p class="highlight">`	元素选择器 `p` 命中(字体 Arial、色 `#333`);类 `.highlight` 也命中(黄底、加粗)	两条规则叠加:Arial 字、深灰字、黄底、加粗——类和元素规则不冲突,各管各的
`<p>`(第二个)	只有元素选择器 `p` 命中	仅 Arial 字、深灰字,无黄底

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

4. 作者的判断与证据¶

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

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

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

5. 边界与局限¶

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

6. 可带走的¶

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

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

7. 原文地图¶

主题	原书章	原文位置
规则 = 选择器 + 声明块	Chapter 2: CSS Syntax and Selectors	`text/03-ch02-chapter-2-css-syntax-and-selectors.txt:12`(搜「consists of a selector」)
零件表(选择器/属性/值/花括号)	同上	`text/03-ch02-chapter-2-css-syntax-and-selectors.txt:30`(搜「targets all」)
多条声明用分号隔开	同上	`text/03-ch02-chapter-2-css-syntax-and-selectors.txt:39`(搜「semicolon」)
元素选择器示例	同上	`text/03-ch02-chapter-2-css-syntax-and-selectors.txt:46`(搜「specific type」)
类选择器:点号、可复用	同上	`text/03-ch02-chapter-2-css-syntax-and-selectors.txt:54`(搜「dot (.)」) · `text/03-ch02-chapter-2-css-syntax-and-selectors.txt:63`(搜「reuse classes」)
ID 选择器:井号、应唯一	同上	`text/03-ch02-chapter-2-css-syntax-and-selectors.txt:65`(搜「hash (#)」) · `text/03-ch02-chapter-2-css-syntax-and-selectors.txt:73`(搜「only used once」)
三种选择器对照表	同上	`text/03-ch02-chapter-2-css-syntax-and-selectors.txt:74`(搜「Comparing」)
组合选择器两例	同上	`text/03-ch02-chapter-2-css-syntax-and-selectors.txt:90`(搜「inside a <div>」) · `text/03-ch02-chapter-2-css-syntax-and-selectors.txt:94`(搜「h1, h2, h3」)
四条好习惯	同上	`text/03-ch02-chapter-2-css-syntax-and-selectors.txt:98`(搜「Good Habits」) · `text/03-ch02-chapter-2-css-syntax-and-selectors.txt:101`(搜「Be descriptive」)
主线例子全文	同上	`text/03-ch02-chapter-2-css-syntax-and-selectors.txt:111`(搜「Step 1」) · `text/03-ch02-chapter-2-css-syntax-and-selectors.txt:125`(搜「Element selector」)

出处:「Chapter 2: CSS Syntax and Selectors」第 12–36 段(text/03-ch02-chapter-2-css-syntax-and-selectors.txt:12,搜「written in rules」;:30,搜「targets all」)。原文:「CSS is written in rules. A CSS rule consists of a selector and a declaration block.」零件表原文行:「p — The selector (targets all <p> tags)」「color and font-size — The properties」「blue and 16px — The values」「{} — The declaration block」。 ↩
出处:「Chapter 2: CSS Syntax and Selectors」第 38–39 段(text/03-ch02-chapter-2-css-syntax-and-selectors.txt:39,搜「semicolon」)。原文:「You can include multiple properties inside one block — just separate them with a semicolon ;.」漏分号会导致声明串行的机制是我们按 CSS 规范补的解释(补充,不在书里,来自通用知识)。 ↩
出处:「Chapter 2: CSS Syntax and Selectors」第 42 段(text/03-ch02-chapter-2-css-syntax-and-selectors.txt:42,搜「what part of the page」)。原文:「Selectors tell the browser what part of the page you want to style.」 ↩
出处:「Chapter 2: CSS Syntax and Selectors」第 45–52 段(text/03-ch02-chapter-2-css-syntax-and-selectors.txt:46,搜「specific type」;:52,搜「purple」)。原文:「This targets all HTML elements of a specific type.」 ↩
出处:「Chapter 2: CSS Syntax and Selectors」第 53–62 段(text/03-ch02-chapter-2-css-syntax-and-selectors.txt:54,搜「dot (.)」;:54,搜「before the class」)。原文:「Use a dot (.) before the class name.」 ↩
出处:「Chapter 2: CSS Syntax and Selectors」第 63 段(text/03-ch02-chapter-2-css-syntax-and-selectors.txt:63,搜「reuse classes」)。原文:「You can reuse classes on multiple elements.」 ↩
出处:「Chapter 2: CSS Syntax and Selectors」第 64–73 段(text/03-ch02-chapter-2-css-syntax-and-selectors.txt:65,搜「hash (#)」;:73,搜「only used once」)。原文:「Use a hash (#) before the ID name.」;「IDs should be unique — only used once per page.」 ↩
出处:「Chapter 2: CSS Syntax and Selectors」第 74–80 段(text/03-ch02-chapter-2-css-syntax-and-selectors.txt:74,搜「Comparing」)。对照表原文三行:Element p / Class .my-class / ID #my-id,Target Scope 分别是 All <p> tags / All elements with that class / One specific element。 ↩
出处:「Chapter 2: CSS Syntax and Selectors」第 82–96 段(text/03-ch02-chapter-2-css-syntax-and-selectors.txt:90,搜「inside a <div>」;:94,搜「h1, h2, h3」)。原文:「Affects only <p> tags that are inside a <div>.」;「All three heading levels will have the same font.」 ↩
出处:「Chapter 2: CSS Syntax and Selectors」第 98–107 段(text/03-ch02-chapter-2-css-syntax-and-selectors.txt:98,搜「Good Habits」;:101,搜「Be descriptive」;:103,搜「main-button」)。四条原文:用类做可复用样式;类名要有描述性(反例 .a1、.blue,正例 .main-button、.error-message);相似的样式归拢在一处;多页项目的样式放单独文件。 ↩