JSFiddle.

Question

即使是HTML，我也是HTML5的新手。我的混淆是关于HTML代码使用的标题，这是我的代码片段：

<body>
  <header>
    <h1>Text A</h1> 
  </header>

  <section>
    <h1>Text B</h1>
    <article>
      <header>
        <hgroup>
          <h1>Text C</h1>
          <h2>Text C2</h2>
        </hgroup>
       </header>

好的，让我们谈谈这个话题，我的问题是;

＆lt; h1＆gt;在＆lt; header＆gt;内标题＆lt; body＆gt;比＆lt; h1＆gt;大得多的部分在＆lt; section＆gt;内比＆lt; h1＆gt;大得多的部分。在＆lt; article＆gt;里面并且＆lt;部分＆gt;部分。换句话说：文本A＆gt;文字B＆gt;文本C，尽管他们使用相同的标题。
为什么文本C2比文本C大得多，而文本C2使用＆lt; h2＆gt;而文字C使用＆lt; h1＆gt;他们在同一个地方？

是某种错误吗？顺便说一句，我使用Firefox浏览器。提前谢谢。

Answer 1

h1的默认规则如果在section内，则会有所不同。这是设计的。请参阅以下默认Chrome＆＃34;用户代理＆＃34;规则：

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

以上内容会覆盖h1的默认Chrome规则，即

h1 { font-size: 2em; }

您可以指定自己的h1规则，该规则将覆盖上述规则，因为您自己的规则的优先级高于用户代理规则：

h1 { font-size: 2em; }

这与绝对字体大小和相对字体大小无关，也与继承的字体大小无关。 h1内的section较小，因为它继承自section，因为section没有内置字体大小。

Text C2大于Text C的原因是上述默认规则仅适用于h1元素中的article元素，但不适用于h2 ，出于浏览器开发人员最熟悉的原因。您可以通过检查您喜欢的DOM /样式检查器中的级联来看到这一点。

顺便说一句，上面的:-webkit-any是一个特定于Chrome的伪类，可以匹配任何封闭的选择器，因此它可以帮助您免于编写article h1, aside h1, nav h1, section h1。在FF中，等效值为:-moz-any。这不是标准的，在CSS4中将实现为:matches伪类。

Answer 2

JSFiddle.

它只是关于DOM结构。

因为不同的元素具有不同的默认样式来继承。
这个link形成MDN。

<h1>Text A</h1>

<header>
     <h1>Text A</h1> 
</header>
<section>
    <header>
         <h1>Text A</h1>

    </header>
</section>
<article>
    <header>
         <h1>Text A</h1>
          <section>
              <header>
                  <h1>Text A</h1>
              </header>
          </section>
    </header>
</article>

为什么H1的大小在section元素中是不同的？

2 个答案:

JSFiddle.

它只是关于DOM结构。