后代选择器通过空格连接选择器，匹配嵌套元素，如article h1；可为不同区域（文章、侧边栏、页脚）的标题设置独立样式，实现结构与表现分离，提升可访问性和维护性。

在网页中，标题层级（h1 到 h6）通常用于构建内容的结构。为了按层级为标题设置不同样式，可以使用后代选择器结合它们所处的上下文环境，比如文章、侧边栏或页脚中的标题，实现分层控制样式。

什么是后代选择器

后代选择器通过空格连接两个或多个选择器，匹配指定元素内部的后代元素。
例如：article h1 会选中所有在 article 元素内的 h1，而不影响其他区域的 h1。

按内容区域分层设置标题样式

通过将标题嵌套在不同的容器中，使用后代选择器分别定义样式，能清晰地区分各区域的视觉层级。

• 文章主体中的标题：突出主标题，弱化子标题
• 侧边栏中的标题：字号较小，颜色偏灰，避免喧宾夺主
• 页脚中的标题：更小字号，简洁处理

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

/* 文章内的标题 */
article h1 {
  font-size: 2em;
  color: #333;
  margin-bottom: 1em;
}
article h2 {
  font-size: 1.5em;
  color: #444;
}
article h3 {
  font-size: 1.2em;
  color: #555;
}
<p>/<em> 侧边栏中的标题 </em>/
aside h1,
aside h2,
aside h3 {
color: #666;
margin-top: 1.2em;
}
aside h1 {
font-size: 1.4em;
border-bottom: 1px solid #ddd;
}
aside h2 {
font-size: 1.2em;
}
aside h3 {
font-size: 1em;
}</p><p>/<em> 页脚中的标题 </em>/
footer h1,
footer h2 {
font-size: 1.1em;
color: #777;
text-transform: uppercase;
}</p>

保持语义与样式的分离

HTML 负责结构，CSS 负责表现。不要用 h1～h6 表达视觉大小，而应反映内容逻辑层级。
比如侧边栏的“推荐文章”虽然是小标题，但如果是该区域最重要的信息，仍可用 h2，再由 CSS 控制其显示大小。

这样既保证了可访问性（如屏幕阅读器正确识别结构），也便于样式统一管理。

立即学习“前端免费学习笔记（深入）”；

基本上就这些。用后代选择器按容器区分标题样式，结构清晰，维护方便。