gpt4 book ai didi

html - 为什么在 section 元素内 H1 的大小不同?

转载 作者:太空狗 更新时间:2023-10-29 15:35:17 25 4
gpt4 key购买 nike

即使在 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>

好了进入正题,我的问题是;

  1. 部分的 <header> 内的

    标题比
    部分内的

    大得多,而
    部分内的

    内的

    大得多部分>部分。换句话说:文本 A > 文本 B > 文本 C,尽管它们使用相同的标题。

  2. 为什么文本 C2 比文本 C 大得多,尽管文本 C2 使用

    而文本 C 使用

    并且它们位于同一位置?

这是某种错误吗?顺便说一下,我使用 Firefox 浏览器。提前致谢。

最佳答案

h1 的默认规则在 section 中是不同的。这是设计使然。请参阅以下默认的 Chrome“用户代理”规则:

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

以上内容覆盖了 h1 的默认 Chrome 规则,即

h1 { font-size: 2em; }

您可以指定自己的 h1 规则,这将覆盖上述规则,因为您自己的规则比用户代理规则具有更高的优先级:

h1 { font-size: 2em; }

这与绝对字体大小和相对字体大小无关,也与继承的字体大小无关。不可能是section里面的h1比较小,因为它是继承自section的,因为section没有内置字体大小。

Text C2Text C 大的原因是上面提到的默认规则只适用于 内的 h1 元素article 元素,但不是 h2,原因是浏览器开发人员最了解的。您可以通过在您最喜欢的 DOM/样式检查器中检查级联来看到这一点。

顺便说一下,上面的 :-webkit-any 是一个特定于 Chrome 的伪类,它匹配任何包含的选择器,所以它可以让你不用写 article h1,除了h1,导航 h1,h1 部分。在 FF 中,等效项是 :-moz-any。这不是标准的,在 CSS4 中将作为 :matches 伪类实现。

关于html - 为什么在 section 元素内 H1 的大小不同?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26290849/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com