带有部分的标题标签的不同行为

Question

标题标签行为（h1和h2）如果我在[中写h1和h2 =13=] 或 aside 它显示相同的字体大小，如果我把它放在 section 或 aside 标签之外，它可以正常工作。

我已经搜索了很多但没有得到答案。

有人回答。

<h1>heading 1</h1>
<h2>heading 2</h2>
<h3>heading 3</h3>


<section>
    <h1>heading 1</h1>
    <h2>heading 2</h2>
    <h3>heading 3</h3>
</section>

<aside>
    <h1>heading 1</h1>
    <h2>heading 2</h2>
    <h3>heading 3</h3>
</aside>

Answer 1

这是浏览器自定义样式）例如。 h1 在部分或旁边有 font-size: 2em，但在部分、文章、旁边、导航中有 font-size: 1.5em 在开发工具中查看。

:-webkit-any(article,aside,nav,section) h1 {
font-size: 1.5em;
-webkit-margin-before: 0.83em;
-webkit-margin-after: 0.83em;
}

article, section, nav, aside h1 之外有这种风格

h1 {
display: block;
font-size: 2em;
-webkit-margin-before: 0.67em;
-webkit-margin-after: 0.67em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
font-weight: bold;
}

如果您不想要这样的惊喜 - 使用 normalize.css )

重置浏览器样式

Answer 2

可以找到 HTML5 根据 W3C 规范的默认样式 here

现在，根据上面的规范，default styling for the h1 and h2 tag 如下：

h1 { margin-top: 0.67em; margin-bottom: 0.67em; font-size: 2.00em; font-weight: bold; }
h2 { margin-top: 0.83em; margin-bottom: 0.83em; font-size: 1.50em; font-weight: bold; }

所以默认情况下 h1 标签有 font-size: 2.00em; 和 h2 标签有 font-size:1.5em

到目前为止一切顺利。

但是，如果 h1 标签嵌套在 article、aside、nav 或 section 元素中 - 那么 h1呈现方式不同：

以下是规范中的 relevant section：（粗体是我的）

The article, aside, nav, and section elements are expected to affect the margins and font size of h1 elements, as well as h2–h5 elements that follow h1 elements in hgroup elements, based on the nesting depth.

If x is a selector that matches elements that are either article, aside, nav, or section elements, then the following rules capture what is expected:

@namespace url(http://www.w3.org/1999/xhtml);

x h1 { margin-top: 0.83em; margin-bottom: 0.83em; font-size: 1.50em; }
x x h1 { margin-top: 1.00em; margin-bottom: 1.00em; font-size: 1.17em; }
x x x h1 { margin-top: 1.33em; margin-bottom: 1.33em; font-size: 1.00em; }
x x x x h1 { margin-top: 1.67em; margin-bottom: 1.67em; font-size: 0.83em; }
x x x x x h1 { margin-top: 2.33em; margin-bottom: 2.33em; font-size: 0.67em; }

请注意，当 h1 标记在 section 或 aside 等中嵌套 1 层时，它默认为 font-size:1.5em.

这解释了为什么 section 或 aside 元素中的 h1 元素与 h2 元素 (1.5em) 具有相同的 font-size在问题中描述。

现在，如果 h1 元素在 section、aside（或 nav 或 article）元素中有更高级别的嵌套，则 h1元素的字体越来越小。

为了说明这一点，请看这里的 this fiddle，因为 h1 嵌套在 article 和 section 中 - 它呈现得更小比 HTML5 默认样式的 h2。

<h1>heading 1</h1>
<h2>heading 2</h2>
<h3>heading 3</h3>

<hr />
<section>
  <h1>heading 1</h1>
  <h2>heading 2</h2>
  <h3>heading 3</h3>
</section>
<hr />
<article>
  <section>
    <h1>heading 1 - Nested by 2 levels - *smaller* than h2 !!</h1>
    <h2>heading 2</h2>
    <h3>heading 3</h3>
  </section>
</article>

带有部分的标题标签的不同行为

Different behavior of heading tag with section

html

css

heading