演示

Question

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

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

我当时想对齐我需要的文字：

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

但是：

  .coverTitle
    {
      text-align:center;
    }

也可以。

在另一端，

  .coverTitle
    {
       font-size: 10px;
    }

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

有些事情如何影响孩子，而其他事情却不会？

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

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

结论是，如果子元素的大多数CSS属性未显式传递值，则它们将从其父元素继承。

Answer 2

原因是因为<h1>的默认用户代理字体大小大于普通文本。为了覆盖它，必须显式更改所有<h1>或类中的字体大小：

.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>

Answer 3

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

.coverTitle {
  font-size: 10px;
}

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

Answer 4

要在不知道哪个标题标签是子元素的情况下更改子元素的字体大小，请尝试以下操作：

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

.coverTitle
{
   font-size: 10px;
}

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

Answer 5

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

它实际上部分起作用

现在，用户代理（浏览器）将一些起点样式表应用于所有元素，并且该样式表随浏览器的不同而不同，对于Chrome，=SUMIFS(E2:E100000; A2:A100000; "=2018.12.21"; B2:B10000; ="132380")得到h1的重要性注意，因为font-size:2em不会被继承所覆盖。

你说

computed values

.coverTitle { font-size: 10px; }将获得div.coverTitle，但font-size:10px将获得h1，这是因为font-size:20px默认具有乘数2em，< / p>

演示

h1

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，但不会影响字体大小？

5 个答案:

演示