为什么text-align会影响子div,而不会影响font-size?

问题描述 投票:0回答:5

这是基本的,但我找不到我需要的东西。

 <div class="coverTitle"><h1> The Best In Town </h1></div>

我想要调整我需要的文字:

.coverTitle>h1
{
  text-align:center;
}

但是:

  .coverTitle
    {
      text-align:center;
    }

也有效。

另一方面,

  .coverTitle
    {
       font-size: 10px;
    }

不会影响该孩子的字体大小。

有些事情会影响孩子而其他事情不会影响孩子吗?

css
5个回答
1
投票

请参阅下面的工作代码段:

.coverTitle.one {
  text-align:center;
}

.coverTitle.two {
  font-size: 10px;
}
<div class="coverTitle one">
  <h1> text-align: center </h1>
</div>

<div class="coverTitle two">
  <h1> font-size: 10px </h1>
</div>

font-size肯定会影响儿童元素。 (更准确地说,子元素肯定继承自其父元素)

所以你声称父母的font-size不会影响孩子的font-size是错误的。

现在看另一个例子:

.coverTitle.one {
  text-align:center;
}

.coverTitle.two {
  font-size: 10px;
}

.coverTitle.two > h1 {
  font-size: 50px;
}
<div class="coverTitle one">
  <h1> text-align: center </h1>
</div>

<div class="coverTitle two">
  <h1> font-size: 10px </h1>
</div>

请注意,我在CSS中添加了> h1以专门定位子元素。

现在,font-size不会从父级继承,因为您已经显式设置了自己的font-size。

需要注意的是,如果未明确传递值,则子元素的大多数CSS属性将从其父元素继承。


1
投票

原因是因为<h1>的默认用户代理字体大小比普通文本大。要覆盖它,您必须显式更改所有<h1>s或类中的字体大小:

.some-class {
  font-size: 18px;
}
<div class="some-class">
  <h1>This is a default H1</h1>
  <p>This is normal text.</p>
</div>

现在让我们明确设置<h1>的字体大小:

.some-class {
  font-size: 18px;
}

.some-class h1 {
  font-size: 20px;
}
<div class="some-class">
  <h1>This is a default H1</h1>
  <p>This is normal text.</p>
</div>

0
投票

实际上这应该有效。您忘记了HTML中的结束标记,这可能是问题的原因。如果没有,则CSS的另一个属性可能会应用并覆盖“font-size:10px”。您可以输入“font-size:10px!important”来尝试此假设。如果它有效,那是因为该属性在代码中的其他地方被有效覆盖。

.coverTitle {
  font-size: 10px;
}
<div class="coverTitle"><h1> The Best In Town </h1></div>

0
投票

要更改子元素的字体大小而不知道哪个标题标记是子元素,请尝试以下操作:

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

.coverTitle
{
   font-size: 10px;
}

这将确保子元素从其父元素接收字体大小。如果要在范围中包含段落标记,请在h6之后包含p。确保在h6和p之间插入逗号。


0
投票

为什么text-align会影响子div,而不会影响font-size?

它实际上是部分的

现在,用户代理(浏览器)将一些起点样式表应用于所有元素,并且因浏览器而异,在chrome的情况下,h1获得font-size:2em,这一点很重要,因为computed values不会被覆盖遗产。

当你说

.coverTitle
{
   font-size: 10px;
}

div.coverTitle将获得font-size:10pxh1将获得font-size:20px这是因为2em乘以h1乘以默认值

Demo

div {
  font-size: 10px;
}

div>h1 {
  /*   1em = 16px */
  /*   default font-size:2em;  */
  /*   font-size is inherited by default */
  /*   font-size: inherited * default */
  /*   font size becomes */
  /*   font-size:20px; */
}

.helper {
  font-size: 20px;
  /* or */
  /* font-size: calc(10px * 2); */
}
<div>
  <h1>Test</h1>
</div>
<h1 class="helper">Test</h1>
© www.soinside.com 2019 - 2024. All rights reserved.