3.1 选择器与层叠：装修派工单
3.1 选择器与层叠：装修派工单
本节摘要：样式规则由选择器与声明块组成——选择器点名"给谁装"，声明写"装成什么样"。本节讲三种引入方式的取舍、从元素到状态的常用选择器、以及多条规则冲突时层叠机制的裁决顺序：行内最强、特异性次之、后来者居上。看板的样式文件在本节立项，页面基调定稿。
派工单的格式：选择器加声明
样式班开工第一课是写派工单。一份派工单（规则）分两段：前半段选择器，回答给谁装；后半段花括号里的声明块，一条声明一个键值对，回答装成什么样。比如给统计数字放大字号：选择器点到统计数字的挂钩，声明写字号键与数值。多条派工单汇成一张样式表，就是样式班的全部工作产物。
图 1：层叠裁决的优先顺序
裁决顺序为什么重要？因为真实项目的样式表里，同一个元素几乎总会被多条规则点到——基础规则给所有表格设样式，模块规则给工单表加边距，状态规则给当前行上色。读样式时脑中没有裁决顺序，就永远在问"这条怎么没生效"；有了顺序，翻两眼样式窗格就能定位胜者与败者。
三种引入方式：从临时到正式
样式进页面有三种方式，按使用场景选。行内样式直接写在元素的样式属性里，一次性的调试或邮件模板才用；内嵌样式写在文档头部的样式标签里，适合单页小作品或演示；外链样式独立成文件由文档引用，是正式项目的标准做法——三班分文件协作、浏览器缓存复用，都建立在外链的基础上。
<!-- 方式一：外链（正式项目标准做法） --> <head> <link rel="stylesheet" href="board.css"> <!-- 独立样式文件：样式班的地盘，多页面共享，浏览器可缓存 --> </head> <!-- 方式二：内嵌（单页演示或极小改动） --> <style> .stat-num { font-size: 28px; } /* 写在文档头部：省一个文件，但无法跨页面复用 */ </style> <!-- 方式三：行内（仅限临时调试） --> <p style="color: #c0392b;">这条今日必读</p> <!-- 写死在元素上：派工单贴在墙上改不动，正式装修禁用 -->
/* board.css 立项：看板装修的第一批规则 */ :root { --status-pending: #9aa0a6; /* 自定义属性：全站色板收拢一处 */ --status-running: #1a6ec8; --status-done: #1e8e4e; --ink: #2c3e50; /* 正文墨色 */ --paper: #f5f6f7; /* 页面底色 */ } body { color: var(--ink); /* 取用自定义属性，改色板一处生效 */ background: var(--paper); font-family: "PingFang SC", "Microsoft YaHei", sans-serif; }
第二个代码块里出现的自定义属性是样式班的"色板管理制度"：把颜色数值收进命名变量，规则里只引用名字。日后车间换视觉规范，改一处变量全站换装；不这么管，改一个主题色要在几百条规则里搜替换。
选择器练兵：从点名到圈范围
常用选择器分四路：元素选择器按标签名点整类元素，类选择器按类名挂钩点单或多件，标识选择器按唯一编号点一件，关系与状态选择器按位置或状态圈范围。样式班的日常以类选择器为主力——它数量不限、语义清楚，是结构班挂钩体系的天然对接口。
/* 四路选择器在工单表上的实战 */ th { /* 元素选择器：所有表头单元格 */ text-align: left; /* 表头左对齐（覆盖默认居中） */ } .order-table { /* 类选择器：工单表这个具体对象 */ border-collapse: collapse; /* 相邻边框合并成一根，表格清爽的关键 */ } #new-order-form { /* 标识选择器：全页唯一的新增表单 */ max-width: 480px; /* 表单别拉满全宽，窄一点更好读 */ } .order-table tbody tr:nth-child(2n) { /* 复合选择器：工单表的表体行，隔行取偶数行 */ background: #fbfcfd; /* 斑马纹：长表格逐行追踪不串行的法宝 */ } a:hover { color: var(--status-running); } /* 状态选择器：链接悬停变色——伪类选择器专点状态，冒号开头 */ .order-table td:first-child { font-weight: 600; } /* 关系选择器：每行第一个单元格加粗，工单编号醒目 */
/* 特异性实战：三条规则同时点到一个元素，谁赢？ */ .badge { color: #333; } /* 记一分（类） */ .badge-done { color: var(--status-done); } /* 同为一类，看下一条 */ td .badge-done { color: #1e8e4e; } /* 元素加类，特异性更高：胜出 */ /* 装修现场的对应一幕： 元素面板样式窗格里按胜负排序，被压掉的规则整条划线， 划线样式就是"败者名单"——排查样式问题的第一入口 */
层叠冲突的现场排查
把裁决顺序用到排错上，流程是固定的三步。第一步，在元素面板选中"没生效"的元素，样式窗格里找到被划线的目标规则——败者名单一目了然。第二步，看胜者是谁：胜者特异性更高，说明被更精确的点名压住了；胜者带重要性标记，说明遇到了救火代码；胜者是行内样式，说明有人绕过了样式表。第三步，对症处理：该提特异性就并一条复合选择器，该删救火标记就删，绝不再用一个更强的标记去压制——用重要性标记打架，最后整个样式表都是感叹号。
看板工地上一个真实案例：车间主任反馈"已完成的绿色徽章有时显示成灰色"。现场勘查发现，斑马纹规则用了高特异性复合选择器连带设定了颜色，把状态徽章的灰色规则压了下去——两班施工互相踩脚。修复不是加码特异性，而是把斑马纹规则收窄到明确排除徽章列。教训浓缩成一句：特异性是用来表达"更精确的意图"的，不是用来打赢样式战争的。
⚠️ 常见坑：用标识选择器写样式。标识特异性太高，日后任何想覆盖它的类选择器都压不住，只能继续加码或动用重要性标记。规范的做法：标识留给行为班当靶心与锚点，样式班一律用类。
💡 关键直觉：写每条规则前先估一次特异性，就像派工前先查职权范围。让"越具体的规则特异性越高"自然成立，样式表就不需要裁决战争——常态下根本打不起来。
本节要点回顾
- 规则结构：选择器点名给谁装、声明块写装成什么样，一份份规则汇成样式表；
- 引入取舍：外链为正式标准、内嵌做单页演示、行内只配临时调试；
- 裁决顺序：重要性压一切、行内压样式表、标识压类、同级比书写先后；
- 色板管理：颜色收进自定义属性，改主题一处生效，杜绝全局搜替换；
- 选择器主力：类选择器数量不限语义清楚，标识留给行为班当靶心；
- 排错三步：看败者划线名单、找胜者来源、收窄或提权对症处理。
派工单会写了，下一节的度量衡跟上：盒模型，把每个元素变成可计算的盒子。