h1, .title { color: #24292f; line-height: 1.3; }
h1, .title）决定命中谁，逗号是「或」。margin: 10px 20px 是四个值里的两个），冒号后的空格没有。/* 单行注释只有这一种写法 */ /* 也可以 跨多行 */ // 这不是 CSS 注释！预处理器（Sass/Less）才支持 /* 在声明里加注释会切断这条声明： color: red /* 说明 */ ; ← 语法错误 */
不要指望 /* … */ 里的内容「不会执行」——CSS 没有执行概念，但注释里的错拼选择器会随文件一起分发，也常被误当作生效代码。
/* 分组：一次写多个选择器 */
h1, h2, h3 { line-height: 1.25; }
/* 错误恢复是「整条规则」级别的：分组里任意一个选择器解析失败，
浏览器会丢掉直到下一个 } 为止的整块内容，其余规则不受影响 */
h1, .card > > .title { color: red; } /* ← 这一整块都不会生效 */
/* 声明简写：一条顶四条 */
margin: 10px 20px; /* 上下 10px，左右 20px */
padding: 8px 12px 8px 12px; /* 上 右 下 左，顺时针 */
border: 1px solid #d0d7de; /* 宽度 样式 颜色 */
background: #f6f8fa url(a.png) no-repeat center / cover; /* 连 color/position/size 都能一行写完 */
简写的隐藏行为：它会把没提到的分量重置为初始值。写了 background: red 之后再单独写 background-position，位置可能被前一条简写清掉——这是「明明写了却不生效」的高频原因。
主要 12 危险 禁用态 默认
.chip /* 块：组件本体 */ .chip__count /* 元素：块内部的组成部分，用双下划线 */ .chip--primary /* 修饰符：同一种东西的变体，用双连字符 */ .chip.is-disabled /* 状态：由 JS 加上去的类，常配 is-/has- 前缀 */
BEM 不是标准，只是一种能防止选择器膨胀的命名纪律。三条收益：一看类名就知道归属、任何一条规则都能单独看懂、权重始终保持低位（单个 class）方便覆盖。
| 写法 | 后果 |
|---|---|
colo: red（属性拼错） | 整条声明被忽略，其余照常生效 |
color red;（漏冒号） | 整条声明被忽略 |
margin: 10px 20px（漏分号） | 下一条声明被吞掉 |
{ … } 少一个花括号 | 整个规则块直到下一个 } 全部失效，破坏面最大 |
width: 100（长度漏单位） | 除 0 和单位无关关键字外，长度必须带单位 |
.card>p{…}（子代组合符无空格） | 合法；但 .card > .item-list 与 .card >.item 混写会让审阅困难，建议统一带空格 |
中文全角分号 ；、全角冒号 ： | 中文输入法下的第一大坑，症状与「漏分号」相同 |
排查顺序：DevTools Elements → Styles 面板看该规则有没有被划掉（划掉 = 被覆盖或语法无效），或看它有没有出现在样式列表里（没出现 = 整条规则解析失败）。