Yag*_*ami 5 firefox html5 html-heading
即使是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>
好吧，让我们开始讨论这个话题，我的问题是；
<body>部分的<header>内部的<h1>标题比<section>部分内部的<h1>大得多，而<h1>比<section>部分的<article>内部的<h1>大得多。换句话说：文本A>文本B>文本C，即使它们使用相同的标题。
为什么文本C2比文本C大得多，尽管使用<h2>的文本C2而使用<h1>的文本C却在同一位置？
是某种错误吗？顺便说一下，我使用Firefox浏览器。提前致谢。
小智 6
h1如果位于的默认规则不同section。这是设计使然。请参阅以下默认的Chrome“用户代理”规则：
:-webkit-any(article,aside,nav,section) h1 { font-size: 1.5em; }
上面的代码覆盖了的默认Chrome规则h1，即
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伪类。
因为不同的元素有不同的默认样式继承。
此链接来自 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>
| 归档时间： |
|
| 查看次数： |
3237 次 |
| 最近记录： |