CSS标题需要按层级设置不同样式怎么写_用后代选择器分层处理标题问题

P粉602998670 2025-12-01 00:00:00 次阅读

后代选择器通过空格连接选择器，匹配嵌套元素，如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;
}
/ 侧边栏中的标题 /
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;
}
/ 页脚中的标题 /
footer h1,
footer h2 {
font-size: 1.1em;
color: #777;
text-transform: uppercase;
}