html - h1 标签小于 h2，都在 section 标签内

Question

我的 h1 标签位于 section 标签内，比 h2 标签小。 h1 标签在 section 标签之外时大小正确。我一直在浏览我的 CSS 页面，但没有找到任何可以实现这种情况的东西。

body {
  font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
  background-color: #42413C;
  margin: 0;
  padding: 0;
  color: #000;
  background-image: url(images/mass_effect_1_citadel_dreamscene_by_droot1986-d5sw7hu.jpg);
}

a img {
  border: none;
}

.container {
  width: 960px;
  background-color: #192370;
  margin: 0 auto;
}

header {
  background-color: #050a2e;
}

.sidebar1 {
  float: left;
  width: 175px;
  background-color: #2236d1;
  padding-bottom: 10px;
  border: solid thin black;
  text-align: center;
}

.content {
  padding: 10px 0;
  width: 780px;
  float: right;
  border: solid thin black;
}

footer {
  padding: 10px 0;
  background-color: #050a2e;
  position: relative;
  clear: both;
  text-align: center;
}

header,
section,
footer,
aside,
article,
figure {
  display: block;
  color: white;
}

a:link {
  text-decoration: none;
  color: #d1bd22;
  font-size: 1.3em;
}

a:visited {
  text-decoration: none;
  color: white;
  font-size: 1.3em;
}

a:hover {
  text-decoration: underline;
  color: #d1bd22;
  font-size: 1.3em;
}

a:active {
  text-decoration: underline;
  color: white;
  font-size: 1.3em;
}

<h1>H1 Outside section</h1>
<h2>H2 Outside section</h2>
<section>
  <h1>H1 Inside section</h1>
  <h2>H2 Inside section</h2>
  <section>
    <h1>H1 Inside nested section</h1>
    <h2>H2 Inside nested section</h2>
  </section>
</section>

Answer 1

如果您在没有样式表的情况下测试这种情况，您会看到 section 元素中的 h1 以较小的字体显示。这是由浏览器样式表引起的，在支持 section 及其 suggested rendering 的浏览器中在 HTML5 中。 section element已被定义为在其中，h1 元素是该部分的标题，因此相对于整个页面，它处于第 2 级(甚至在较低级别，如果 section 元素已嵌套)。

对于这种方法的充分性存在各种意见，但这就是 HTML5 草案所说的以及一些浏览器已经实现的内容。另一方面，旧浏览器会忽略此类规则，因此该方法实际上并不可靠。使用 h2 作为章节标题更安全(并且根据 HTML5 是完全可以接受的)。