第2章 · 选择器 · CSS 课堂演示

2.1基础四件套：标记 / 类 / id / 通配符

标记选「一类人」，类选「一群人」，id 选「唯一的人」，* 选「所有人」。

标记选择器：所有 p 都变红

类选择器：挂着 .c-red 的变红

id 选择器：全页面只有我一个，绿色加粗

通配符 * 给所有元素垫了浅黄底（包括这段 div）

/* 标记选择器：选所有 p */
p { color: #B04A2C; }

/* 类选择器：谁挂 .c-red 谁红，
   一个页面可重复用多次 */
.c-red { color: #B04A2C; }

/* id 选择器：全页面唯一，
   JS 里常用 getElementById 找它 */
#only-me { color: #3F6E6A; font-weight: 700; }

/* 通配符：选中所有元素，
   常用于「清零」浏览器默认样式 */
* { background: #F8ECDA; }

命名习惯：类管样式、id 管锚点和 JS。id 当样式用会跟 JS 抢名，且复用不了。

2.2后代选择器与子代选择器空格 vs >

空格 = 儿孙全算；> = 只算亲儿子。一层之差，范围大不同。

水果（li）—— 被后代选择器选中
- 苹果（孙辈 li）—— 也被后代选中，但不是「亲儿子」
- 橘子（孙辈 li）—— 同上
蔬菜（li）—— 亲儿子，底色更深

/* 后代选择器：.tree-demo 里
   所有层级的 li 全中（含孙辈） */
.tree-demo li { color: #B04A2C; }

/* 子代选择器：只选「亲儿子」这层，
   孙辈 li 不算 */
.tree-demo > li {
  background: #F3E0D5;
}

/* 用途：导航栏二级菜单、
   目录树展开收起……都靠这套控制范围 */

右侧代码框里 > 显示为 >——在 HTML 源码里写 CSS 要转义大于号，这是网页里的转义现象，顺便复习。

2.3兄弟选择器+ 挑一个，~ 挑一串

+ 选中「紧跟在后面的第一个」，~ 选中「后面所有同辈」。

标题一

紧跟标题一（+ 和 ~ 都选中）

第二段（只有 ~ 选中）

标题二

紧跟标题二（+ 选中；~ 也认它，因为都是 h4 的兄弟）

/* 相邻兄弟：只挑「紧跟在 h4 后面
   的那一个 p」 */
h4 + p {
  background: #EAF0E0;
}

/* 通用兄弟：h4 后面「所有的 p」，
   中间隔几个元素都算 */
h4 ~ p {
  background: #E2ECEA;
}

/* 两个都写了 → 紧跟的那个
   同时命中两条，颜色取更后面的 */

看渲染结果：第一段叠了两种底色，最终显示绿色系——为什么？下一章「优先级与层叠」揭晓。

2.4属性选择器按标签属性点名

[type="password"] 这种写法不用加类名，直接按属性抓元素。

/* 带有 type="password" 的输入框 */
input[type="password"] {
  border-color: #B04A2C;
}

/* 带有 disabled 属性的元素 */
input[disabled] {
  background: #F5EFE2;
}

/* 常见写法还有：
   [attr]      存在即可
   [attr^="x"] 以 x 开头
   [attr$="x"] 以 x 结尾
   [attr*="x"] 包含 x */

表格、表单批量化处理时特别好使——不用后端给每个输入框补 class。

2.5伪类：:hover 与 :nth-child()

伪类描述元素的「状态」或「位置」。把鼠标悬到链接上试试；下方色块按位置染色。

1
2
3
4
5
6
7
8
9
10

第 3 个 = 陶土红（精确点名）；奇数行 = 浅红（odd 规律点名）

/* 状态伪类：悬停时触发 */
a:hover { background: #F3E0D5; }

/* 位置伪类：第 3 个孩子 */
.nth-demo li:nth-child(3) {
  background: #B04A2C;
}

/* 奇数个孩子（2n+1 简写 odd），
   斑马纹表格就是 odd/even */
.nth-demo li:nth-child(odd) {
  background: #F3E0D5;
}

/* 常用公式：2n 偶数 / 3n 每3个 /
   n+4 从第4个起 / -n+3 前3个 */

:hover 悬停变样是 CSS 交互的第一课；配合 transition（第 9 章）就是「高级感」的来源。

2.6链接伪类四兄弟 LVHA顺序不能乱

:link 未访问 / :visited 已访问 / :hover 悬停 / :active 按下——按 LVHA 顺序书写。

普通链接（未访问）试试点这个再回来看颜色

/* 记忆：LoVe HAte（爱恨）
   顺序写错，hover/active 会被
   前面的规则覆盖掉！ */
a:link    { background: #EFE6D5; }
a:visited { background: #E4DCEC; }
a:hover   { background: #B04A2C; }
a:active  { background: #8C3A22; }

/* 实战里常直接写：
a { ... }       当作 :link
a:hover { ... } 再补一个悬停 */

浏览器为防隐私窥探，限制 :visited 只能改颜色系——所以「已访问」的样式变化有限，属正常现象。