css - 如何最好地处理 html5 中嵌套 h1 的样式？

Question

我目前正在为我的一些网站开发一些 HTML5 主题，但我一直遇到问题 <h1>的可以多次使用。我似乎无法预测标题会出现在哪些元素中，但我确实想尝试根据它们在 DOM 中的位置自动调整它们的大小...

我正在考虑使用类似的东西

h1 { font-size: 3em; }
h2,
body > * > header h1 { font-size: 2.5em; }
h3,
body > * > header h2,
body > * > * > header h1 { font-size: 2em; }

但显然这远非防水。在 h1 周围有一个额外的元素并不意味着它在页面结构中更深层次将倾向于选择太小的尺寸。例如，一个无序列表的 block 每个都有自己的标题将有类似

<section>
  <ul>
    <li>
      <header>
        <h1>Title of a block</h1>
      </header>
      content
    </li>
 </ul>
</section>

这使得 <h1>看起来比实际更深。有什么好的方法来处理这个问题？

Answer 1

您应该根据元素所在的类型来设置 h1 的样式，而不仅仅是深度。

例如，如果您有通用标题、文章标题和侧边栏元素标题，您可以这样做:

h1 { font-size: 3em }
h2 { font-size: 2.5em }
article h1 { font-size: 2em }
article h2 { font-size: 1.5em }
aside h1 { font-size: 2.5em }

您可以使用任何选择器来选择文章或侧边栏进行布局(在我的示例中，article 和 aside 标签，它可能是 section .sidebar 或其他)来区分不同的 h1 标签。

标签的深度和大小之间没有太大的联系(尽管似乎有一种模式；越深越小)。然而，用于标记侧边栏的约定与侧边栏中标题的大小之间存在联系。标题的 CSS 选择器将与布局的选择器匹配，这显示了连接。