css 如何仅更改普通文本的大小,而不是EM标题

kse8i1jr  于 2023-06-25  发布在  其他
关注(0)|答案(2)|浏览(109)

我正在制作一个网站,我使用em作为字体大小,但在正文中,font-size: 1.2em;也会改变我的标题的大小。我怎么才能阻止这一切?
我尽力了

h1, h2, h3 {
    font-size: inherit;
}

但这使它们达到正常文本的大小。

y3bcpkx1

y3bcpkx11#

尝试使用:not()伪类。Can I use :not() ?显示93.74%的浏览器支持。

body :not(h1, h2, h3, p.default) {font-size: 1.2em}
<h1>Primary heading</h1>
<p>The default text size is 16 pixels</p>

<h2>Secondary heading</h2>
<p>With a 1.2 multiplier, this text is expected to be 19.2px (unless the browser default settings have been modified or zoom is applied.)<p>

<h3>Tertiery heading</h3>
<p>With the default settings, `h1` is 2em (32px), `h2` is 1.5em (24px) and `h3` is 1.17em (18.72px).</p>

<p class="default">This text inside `p.default` is the default size</p>
epfja78i

epfja78i2#

要使用EM仅更改普通文本的大小,而不更改标题的大小,您可以使用以下CSS:

p {
  font-size: 1.5em;
}

这会将所有段落的字体大小设置为默认字体大小的1.5倍。您可以将1.5的值更改为所需的任何大小。
要确保标题的字体大小不受影响,您可以使用以下CSS:

h1, h2, h3, h4, h5, h6 {
  font-size: 1em;
}

相关问题