后代选择器通过空格连接选择器，匹配嵌套元素，如article h1；可为不同区域（文章、侧边栏、页脚）的标题设置独立样式，实现结构与表现分离，提升可访问性和维护性。
在网页中，标题层级（h1 到 h6）通常用于构建内容的结构。为了按层级为标题设置不同样式，可以使用后代选择器结合它们所处的上下文环境，比如文章、侧边栏或页脚中的标题，实现分层控制样式。
什么是后代选择器
后代选择器通过空格连接两个或多个选择器，匹配指定元素内部的后代元素。
例如：article h1 会选中所有在 article 元素内的 h1，而不影响其他区域的 h1。
按内容区域分层设置标题样式
通过将标题嵌套在不同的容器中，使用后代选择器分别定义样式，能清晰地区分各区域的视觉层级。
- 文章主体中的标题：突出主标题，弱化子标题
- 侧边栏中的标题：字号较小，颜色偏灰，避免喧宾夺主
- 页脚中的标题：更小字号，简洁处理
/* 文章内的标题 */
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 控制其显示大小。
这样既保证了可访问性（如屏幕阅读器正确识别结构），也便于样式统一管理。
立即学习“前端免费学习笔记（深入）”；
基本上就这些。用后代选择器按容器区分标题样式，结构清晰，维护方便。
