如何最好地处理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周围有一个额外的元素并不意味着它在页面结构中更深层,因此选择的方法太小了.例如,包含每个都有自己标题的块的无序列表将具有类似的功能

<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选择器将与布局的选择器匹配,显示连接.

Answer 2

首先,我有点不确定你为什么需要一个

section -> ul -> li -> header -> h1

为什么不呢

section -> header -> h1

这似乎是一种有趣的方式来设置你的风格,但也令人困惑,可能没必要.我的意思是HTML并不意味着类和id的结束,为什么不使用:

body section.class{}
body section.class header h1{}

<section class="class">
 <header>
  <h1>Title</h1>
 </header>
 <content>
  <p>Content</p>
 </content>
 <footer>
  footer
 </footer>
</section>

Answer 3

它不会帮你在不久的将来任何实际意义,但对于CSS的建议做出这样的事情有点清洁,该any选择.第二级标题的一般规则将来自:

section section h1, section article h1, section aside h1, section nav h1,
article section h1, article article h1, article aside h1, article nav h1,
aside section h1, aside article h1, aside aside h1, aside nav h1,
nav section h1, nav article h1, nav aside h1, nav nav h1, {
  font-size: 20px;
}

对此:

any(section, article, aside, nav)
any(section, article, aside, nav) h1 {
  font-size: 20px;
}