可用逗号分隔多个标题标签组成选择器组统一设置样式,如h1,h2,h3,h4,h5,h6{margin:0.5em 0;line-height:1.3;font-weight:bold;},按需选取层级并配合类名限定作用域提升可控性。

可以直接用逗号分隔多个标题标签,写成一个选择器组,一次性统一设置样式。
用逗号连接所有标题标签
这是最常用也最直观的方式。把 h1 到 h6(或你实际用到的)全部列出来,用英文逗号隔开,然后写样式规则:
例如:
h1, h2, h3, h4, h5, h6 {
margin: 0.5em 0;
line-height: 1.3;
font-weight: bold;
}
这样所有标题都会应用相同的默认间距和行高,避免逐个重复写。
立即学习“前端免费学习笔记(深入)”;
只选需要的层级,更精准控制
如果项目里只用到 h1–h3,就不用硬拉上 h4–h6。减少冗余,也方便后续单独调整某级标题:
- 保持语义清晰:比如 h1 作主标题、h2 作章节、h3 作小节
- 后续想微调 h2 字体大小,只需再写一条
h2 { font-size: 1.5rem; }覆盖即可 - 避免“一刀切”导致 h6 在侧边栏或卡片里显得过大
配合 class 或上下文进一步限定范围
如果只想改某一块区域里的标题(比如文章正文内),可以加父容器类名限制作用域:
.article-content h1,
.article-content h2,
.article-content h3 {
color: #222;
margin-top: 1.2em;
}
这样不会影响导航栏、页脚或其他模块里的 h1–h3,样式更可控。
基本上就这些——简洁、有效、不复杂但容易忽略。










