第四天：CSS 入门 — 选择器，让样式"指哪打哪"
蜗牛往上爬 · 前端工业可视化学习笔记 第 4 篇
上周我们用 HTML 搭出了网页的骨架。今天开始学 CSS，让网页从"毛坯房"变成"简装房"。CSS 的核心只有两件事：选中元素（选择器）和设定样式（属性+值）。今天先练到"指哪打哪"。
目录
一、CSS 是什么？
CSS 全称 Cascading Style Sheets，中文叫层叠样式表。
三个词拆开：
类比 HTML 的"盖房子"比喻：
HTML = 钢筋混凝土结构（骨架）
CSS = 装修（墙面颜色、家具摆放、灯光效果）
JavaScript = 电灯开关（行为）
二、CSS 的三种写法（哪好哪坏？）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS 三种写法</title>
<!-- 方式二：内部样式表 -->
<style>
h1 { color: blue; }
</style>
<!-- 方式三：外部样式表 -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 方式一：内联样式 -->
<p style="color: red;">我是红色文字</p>
</body>
</html>
🧠 学习阶段用内部样式表（
<style>标签），一个 HTML 文件搞定一切。生产上线用外部样式表。
三、CSS 语法：一条规则的三个零件
选择器 {
属性名: 属性值;
}
/* 选中所有 h1，把文字颜色设为蓝色、字号设为 24px */
h1 {
color: blue;
font-size: 24px;
}
三条硬规则：
每条声明以
;结尾（养成习惯，最后一条也加）属性和值之间用
:分隔用
{}包裹所有样式
四、基本选择器：四把"瞄准镜"
CSS 里最重要的事：你想让哪段文字变红，就得先"选中"它。 选择器就是这个"瞄准镜"。
4.1 四种选择器对比
/* ① 标签选择器：选中所有同名标签，像"广播" */
h1 { color: darkblue; }
p { color: #333; }
/* ② class 选择器（.开头）：选中所有 class="xxx" 的元素，像"点名" */
.card { border: 1px solid #ccc; }
.highlight { background: yellow; }
/* ③ id 选择器（#开头）：选中 id="xxx" 的元素（一页唯一），像"身份证号" */
#main-title { font-size: 28px; }
/* ④ 通配符选择器：选中所有元素（一般只用于重置） */
* { margin: 0; padding: 0; }
4.2 为什么 class 是绝对主力？
/* ❌ 标签选择器：太粗暴，同页所有 h2 都一个样 */
h2 { color: red; }
/* ✅ class 选择器：精准控制，哪个 h2 想变红就加 class */
h2.alert { color: red; }
h2.normal { color: #333; }
class 选择器既有"精准度"又有"可复用性"：同一个 class 可以加给多个元素，同一个元素可以有多个 class。
<!-- 一个元素可以同时有多个 class，用空格分隔 -->
<div class="card device-card highlight">...</div>
/* 三个 class 可以分别写样式，互不冲突 */
.card { border: 1px solid #ccc; }
.device-card { background: white; }
.highlight { box-shadow: 0 0 10px yellow; }
五、组合选择器：精细瞄准
当一个元素不能直接用一个选择器"瞄准"时，需要组合。
5.1 四种组合方式
/* ① 后代选择器（空格）：选中所有嵌套在里面的 */
.nav a { color: white; }
/* 含义：.nav 里所有层级的 a 标签 */
/* ② 子选择器（>）：只选中直接子元素 */
.nav > li { display: inline-block; }
/* 含义：只选 .nav 下的一级 li，不穿透到更深的层级 */
/* ③ 并集选择器（,）：同时选中多个 */
h1, h2, h3 { font-family: sans-serif; }
/* 含义：h1、h2、h3 一起设 */
/* ④ 交集选择器（紧挨着写）：同时满足多个条件 */
p.important { font-weight: bold; }
/* 含义：既是 p 标签，又有 class="important" */
5.2 一张图理清关系
并集 (,) → "或" → 选中 A 或 B
后代 (空格) → "在...里面" → A 里的所有 B
子代 (>) → "直接子元素" → A 的直接子 B
交集 (A.B) → "且" → 同时是 A 且是 B
5.3 属性选择器（进阶，了解即可）
/* 选中所有带 title 属性的元素 */
[title] { cursor: help; }
/* 选中 type="text" 的 input */
input[type="text"] { border: 1px solid #ccc; }
六、伪类选择器：选中"状态"
伪类不是选中元素本身，而是选中元素的特定状态。
6.1 最常用的四个
/* :hover —— 鼠标悬停时 */
a:hover { color: orange; }
button:hover { background: #555; }
/* :focus —— 获得焦点时（输入框点击后） */
input:focus {
border-color: blue;
outline: none; /* 去掉浏览器默认的蓝色边框 */
}
/* :first-child —— 是其父元素的第一个子元素 */
li:first-child { font-weight: bold; }
/* :last-child —— 是其父元素的最后一个子元素 */
li:last-child { border-bottom: none; }
6.2 为什么 :hover 和 :focus 是必学？
<!-- 没有 :hover 的按钮，用户不知道它能不能点 -->
<button>提交</button>
<!-- 没有 :focus 的输入框，用户不知道当前光标在哪 -->
<input type="text" placeholder="请输入">
/* 给按钮加悬停效果 → 即时反馈"可点击" */
button:hover {
background: #2a5a8c;
cursor: pointer; /* 鼠标变成手型 */
}
/* 给输入框加聚焦效果 → 一眼看出"我在这里" */
input:focus {
border-color: #1a3a5c;
box-shadow: 0 0 4px rgba(26, 58, 92, 0.3);
}
🧠
:hover和:focus就是你给用户的第一份"交互体验"。没有它们，页面也能用，但用户会觉得"死板"。
七、动手练：给设备信息登记页穿衣服
把上周的"设备信息登记页"加上 CSS 样式。注意：HTML 结构不变，只加 <style> 标签。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>设备信息登记（带样式）</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Microsoft YaHei", sans-serif;
color: #333;
line-height: 1.6;
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
/* 页头：深蓝背景 + 白色文字 */
header {
background: #1a3a5c;
color: white;
padding: 20px;
border-radius: 8px;
margin-bottom: 20px;
}
header h1 { margin-bottom: 10px; }
/* header 里的链接：浅蓝，悬停变橙 */
header a {
color: #8ecae6;
text-decoration: none;
}
header a:hover {
color: #ffb703;
text-decoration: underline;
}
/* 每个 section 是一个区块 */
section {
background: #f8f9fa;
padding: 20px;
margin-bottom: 20px;
border-radius: 8px;
border: 1px solid #dee2e6;
}
section h2 {
color: #1a3a5c;
margin-bottom: 15px;
border-bottom: 2px solid #1a3a5c;
padding-bottom: 5px;
}
/* 表格 */
table { width: 100%; border-collapse: collapse; }
th { background: #1a3a5c; color: white; padding: 10px; text-align: left; }
td { padding: 10px; border-bottom: 1px solid #dee2e6; }
tr:hover { background: #e9ecef; }
/* 表单控件 */
form p { margin-bottom: 12px; }
label { font-weight: bold; margin-right: 8px; }
input[type="text"], select, textarea {
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 14px;
}
input[type="text"]:focus, select:focus, textarea:focus {
border-color: #1a3a5c;
outline: none;
box-shadow: 0 0 4px rgba(26, 58, 92, 0.3);
}
button {
background: #1a3a5c;
color: white;
border: none;
padding: 10px 24px;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
button:hover { background: #2a5a8c; }
footer {
text-align: center;
color: #666;
padding: 20px;
border-top: 1px solid #dee2e6;
margin-top: 20px;
}
</style>
</head>
<body>
<header>
<h1>设备信息登记</h1>
<nav>
<a href="#device-table">已有设备</a> |
<a href="#device-form">新增设备</a>
</nav>
</header>
<main>
<section id="device-table">
<h2>已有设备</h2>
<table>
<thead>
<tr><th>设备名称</th><th>所属车间</th><th>状态</th></tr>
</thead>
<tbody>
<tr><td>压缩机 A</td><td>一车间</td><td>运行中</td></tr>
<tr><td>冷却泵 B</td><td>二车间</td><td>待机</td></tr>
<tr><td>供料机 C</td><td>一车间</td><td>运行中</td></tr>
</tbody>
</table>
</section>
<section id="device-form">
<h2>新增设备</h2>
<form>
<p>
<label for="deviceName">设备名称</label>
<input type="text" id="deviceName" placeholder="请输入设备名称">
</p>
<p>
<label for="area">所属车间</label>
<select id="area">
<option>一车间</option><option>二车间</option><option>三车间</option>
</select>
</p>
<p>
设备状态：
<label><input type="radio" name="status" value="running"> 运行中</label>
<label><input type="radio" name="status" value="stopped"> 已停止</label>
</p>
<p>
<label for="remark">备注</label>
<textarea id="remark" rows="3" cols="30" placeholder="设备备注信息"></textarea>
</p>
<button type="submit">提交</button>
</form>
</section>
</main>
<footer>
<p>© 2026 蜗牛往上爬 · 前端工业可视化学习</p>
</footer>
</body>
</html>
验证方式：打开浏览器 → 鼠标悬停按钮和链接，看颜色变化 → 点击输入框，看边框变化 → 鼠标悬停表格行，看背景变化。
八、常见坑点与最佳实践
坑 1：选择器写了但样式不生效
/* ❌ 前提：HTML 里是 <div class="card">，不是 <div class="Card"> */
.Card { border: 1px solid #ccc; }
/* class 名区分大小写！Card ≠ card */
/* ❌ 前提：HTML 里是 class="card"，但 CSS 写的 id 选择器 */
#card { border: 1px solid #ccc; }
/* . 和 # 不能混用 */
排查法：F12 → Elements 面板 → 点击目标元素 → 右侧 Styles 面板看有没有你的规则。如果没出现，说明选择器没写对。
坑 2：分号漏写导致整条规则失效
/* ❌ 第二行没分号，后面所有属性都废了 */
h1 {
color: blue /* 少了分号！ */
font-size: 24px; /* 这条不会生效 */
}
坑 3：后代选择器范围太大
/* ❌ 选中页面里所有 a 标签，包括 footer 里的 */
section a { color: red; }
/* ✅ 更精确：只选中导航里的 a */
nav a { color: red; }
最佳实践清单
[x] 学习阶段用
<style>内部样式表，生产用外部样式表[x] 选择器优先级：class 做主、标签做辅、id 少用、
*仅重置[x]
:hover和:focus是"交互体验入门"，每个按钮和输入框都应该配[x] 每条声明末尾加分号（养成习惯）
[x] 样式不生效时，先用 F12 Styles 面板排查
九、这些知识在工业可视化里用在哪？
以智慧工厂大屏为例，CSS 选择器的实际应用：
/* 大屏所有面板统一基础样式 */
.screen-panel {
background: rgba(10, 20, 40, 0.8);
border: 1px solid #1a5c8a;
border-radius: 4px;
padding: 16px;
}
/* 告警面板特殊处理：红色边框 */
.screen-panel.alert {
border-color: #d62828;
}
/* 所有面板的标题统一 */
.screen-panel h3 {
color: #8ecae6;
font-size: 16px;
border-bottom: 1px solid #1a5c8a;
padding-bottom: 8px;
margin-bottom: 12px;
}
/* 告警面板里的数字红色突出 */
.screen-panel.alert .value {
color: #ff6b6b;
font-size: 28px;
font-weight: bold;
}
选择器是你的"精准控制武器"——大屏上几十个数据块，每个都可能需要不同的样式。没有选择器，你只能"全屏一个样"。
十、自测挑战 10 题
CSS 的全称是什么？中文叫什么？
CSS 三种引入方式分别是什么？生产环境推荐哪种？
写出 CSS 语法规则（选择器 + 属性 + 值的格式）。
标签选择器、class 选择器、id 选择器分别怎么写？各举一个例子。
后代选择器（空格）和子选择器（
>）有什么区别？各写一个例子。:hover和:focus分别什么作用？各写一个例子。写出同时选中
h1和h2的并集选择器写法。写出选中
class="card"的所有div的交集选择器写法。给上方的"设备信息登记页"把主色调从蓝色
#1a3a5c改成绿色#2d6a4f。用 F12 的 Styles 面板，给任意元素临时加一条
color: red;，看效果。
加分挑战：在"设备信息登记页"上加一个 :hover 效果，让表格行悬停时背景变浅灰。
十一、总结
今天学完，你应该能做到：
[x] 说出 CSS 是什么、三种引入方式的优劣
[x] 默写 CSS 语法规则
[x] 熟练使用标签、class、id、通配符四种基本选择器
[x] 使用后代（空格）、子代（>）、并集（,）、交集（紧挨）组合选择器
[x] 使用
:hover和:focus给用户即时反馈[x] 独立给一个 HTML 页面添加完整样式
一句话带走：CSS 的核心只有两件事——用选择器"指哪"，用属性+值"打哪"。今天你学会了瞄准，明天学"打出去有多重"（盒模型）。
📎 本文为"蜗牛往上爬"学习博客系列 · 阶段 0（HTML+CSS）第 2 周 · 第 1 篇