标题标记行为(h1和h2)如果我在h1
或{{1}中写h2
和section
它显示相同的字体大小,如果我把它放在aside
或section
标记之外,它就可以正常工作。
我已经搜索了很多,但没有得到答案。
任何人都有答案。
aside

答案 0 :(得分:2)
根据W3C规范,可以找到HTML5的默认样式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 :(粗体是我的)
article
,支持,nav
和部分元素预计会影响h1
元素的边距和字体大小,以及h2-h5元素 基于嵌套,遵循hgroup元素中的h1
个元素 深度。如果
x
是一个匹配元素的选择器article
,,,nav
或部分元素,则以下规则 捕获预期的内容:
@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
。
这解释了为什么h1
或section
元素中的aside
元素与font-size
元素(1.5em)具有相同的h2
,如这个问题。
现在,如果h1
元素在section
,aside
(或nav
或article
)元素中具有更高级别的嵌套,那么h1元素将获得字体越来越小。
为了说明这一点,请在此处查看this fiddle,因为h1
嵌套在article
和section
中 - 它的渲染率甚至小于h2
HTML5默认样式的<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>
。
sun.jvm.hotspot.*
&#13;
答案 1 :(得分:-1)
这是一个浏览器自定义样式)
例如。 h1在节之外或在旁边有font-size: 2em
,但在节,文章,旁边,导航有font-size: 1.5em
参见devtools。
:-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重置浏览器样式