带节标题标签的不同行为
标题标记行为(h1和h2) --如果我在section或aside中写入h1和h2，则显示相同的字体大小，如果将其置于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>
回答 2
Stack Overflow用户
发布于 2015-12-14 10:37:03
这是浏览器的自定义样式。h1在区段之外或旁边有font-size: 2em，但在部分、文章、旁边，nav有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重置浏览器样式)
Stack Overflow用户
发布于 2015-12-14 11:02:03
根据HTML5规范，W3C的默认样式可以找到这里
现在，根据上面的规范，标签如下所示：
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将以不同的方式呈现：
下面是规范中的相关部分：(粗体是我的)
根据嵌套深度，
article、、nav和节元素将影响h1元素的页边距和字体大小，以及hgroup元素中遵循h1元素的H2-h5元素。 如果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元素中与问题中描述的h2元素(1.5em)具有相同的font-size。
现在，如果h1元素在section、aside (或nav或article)元素中嵌套的级别更高，那么h1元素的字体大小会越来越小。
为了说明这一点，请看一下这把小提琴，这里，因为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>
https://stackoverflow.com/questions/34264788
复制相似问题
腾讯云开发者
