为什么H2比H1大？ [英] Why is H2 larger than H1?

问题描述

在下面的代码片段中，为什么H2内容大于H1内容？

In the following code snippet, why is the H2 content larger than the H1 content?

<article>
    <section>
    <header>
        <h1>First Header</h1>
    </header>
    </section>
    <section>
    <header>
        <h2>Second Header</h2>
    </header>
    </section>
</article>

http：// jsfiddle.net/abugp/

为什么在下面的代码片段中H1内容更大，但不是上面的代码片段？

Why is the H1 content larger in the snippet below but not the one above?

<h1>First Line</h1>
<h2>Second Line</h2>

http：// jsfiddle.net/59T43/

推荐答案

由于您尚未指定任何样式，因此标题的大小为由您的浏览器的默认样式表决定。特别是，这意味着两个标题的相对大小可能会因查看器的浏览器而异。

Since you haven't specified any styles, the size of the headings is determined by your browser's default style sheet. In particular, this means that the relative size of the two headers may vary depending on the viewer's browser.

在Chrome 33中查看你的小提琴，我确实看到了你描述。右键单击标题并选择检查元素显示该问题是由于存在< article> 和/或<

Looking at your fiddle in Chrome 33, I do see the effect you describe. Right-clicking the headings and selecting "Inspect element" reveals that the issue is cause by the presence of the <article> and/or <section> tags around the headings.

特别是，Chrome的默认样式表通常包含以下规则：

In particular, Chrome's default style sheet normally includes the rules:

h1 { font-size: 2em }

和：

and:

h2 { font-size: 1.5em }

然而，前者的规则在< article> 和/或< section> 标记，这些标记可能是为了使标题小于正常值而设计的整页标题：

However, the former rule is overridden inside <article> and/or <section> tags by some more specific rules, presumably designed to make section headings smaller than normal "full page" headings:

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

:-webkit-any(article,aside,nav,section)
:-webkit-any(article,aside,nav,section) h1 {
    font-size: 1.17em;
}

非标准： - webkit-any ...）选择器大概只是匹配括号内列出的任何标签。结果是任何< h1> 标题在< article> ，< ;并且> ，< nav> 或< section> 正常< h2> 标题的大小以及两个中的任何< h1> em>这样的标签进一步缩小，大概是正常< h3> 左右。

The non-standard :-webkit-any(...) selector presumably just matches any of the tags listed inside the parentheses. The effect is that any <h1> headings inside an <article>, <aside>, <nav> or <section> tags is reduced to the size of a normal <h2> heading, and any <h1> inside two such tags is shrunk further down, presumably to the size of a normal <h3> or so.

重要的是，Chrome默认样式表 对于< h2> 标签没有任何特殊规则，所以它们将始终Chrome 33，无论如何）被显示在相同的大小。因此，当被两个或多个< article> 和/或< section> 标签包围时，< h1> 变得小于< h2> 。

Crucially, the Chrome default style sheet doesn't have any such special rules for <h2> tags, so they'll always (in Chrome 33, anyway) be shown at the same size. Thus, when surrounded by two or more <article> and/or <section> tags, <h1> becomes smaller than <h2>.

这篇关于为什么H2比H1大？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！