出现h2比h1大？

最新推荐文章于 2024-03-01 20:35:57 发布

步步静心

最新推荐文章于 2024-03-01 20:35:57 发布

阅读量1.1k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_43862596/article/details/116493583

版权

前端专栏收录该内容

36 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
      <h1>第一行</h1>
      <h2>第二行</h2>
<article>
  <section>
      <h1>第一行</h1>
      <h2>第二行</h2>
  </section>
</article>

</body>
</html>

发现h2竟然比h1大，可以直接运行查看

代码中也直接使用默认样式，没有修改

可以在浏览器中查看样式,Chrome的默认样式表通常包含以下规则:

h1 { font-size: 2em }
h2 { font-size: 1.5em }

但上面的为什么会出现那种情况呢？
会发现浏览器里有这样的样式

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

说明h1的样式规则在括号中的section以及article等标记内被某些更具体的规则所覆盖，这些规则可能旨在使各节的标题小于正常的标题
非标准的：-webkit-any（…）选择器大概与括号内列出的任何标签匹配。效果是article，aside，nav或section标记内的任何h1标题均减小为普通h2标题的大小，而两个此类标记内的任何h1会进一步缩小，大概是正常h3的大小。
至关重要的是，Chrome默认样式表对于h2标签没有任何此类特殊规则，因此它们总是都以相同的大小显示。因此，当被两个或更多个article或section标签包围时，h1会变得小于h2。

步步静心

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
出现h2比h1大？

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <h1>第一行</h1> <h2>第二行</h2><article> <section>
复制链接

扫一扫