时间戳

首页 > 解决方案 > 为什么文本对齐会影响子 div，但不会影响字体大小？

css - 为什么文本对齐会影响子 div，但不会影响字体大小？

问题描述

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

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

我在想为了对齐我需要的文本：

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

但是：

  .coverTitle
    {
      text-align:center;
    }

也有效。

另一边，

  .coverTitle
    {
       font-size: 10px;
    }

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

为什么有些事情会影响孩子而有些事情不会？

标签： css

解决方案

请参阅下面的工作片段：

.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专门针对子元素。

现在，字体大小将不会从父级继承，因为您已经明确设置了自己的字体大小。

要点是，如果子元素的大多数 CSS 属性没有显式传递值，它们将从其父元素继承。

推荐阅读