Question

#who {
  font-family: Cambria, Cochin, Georgia, Times, Times New Roman, serif;
  color: white;
  background-color: #f91845;
  position: absolute;
  display: inline-block;
  transform: rotate(-40deg);
  top: 200px;
  left: 300px;
}

<div id="who">
  <h1 class="tlt">Who am I?</h1>
</div>

我也试过以下一个，因为上面的一个不起作用：

h1:first-child{
  font-size: 70px;
}

请告诉我为什么字体没有变化？如果我使用h1：first-child，则该字体将应用于所有h1元素。

Answer 1

尝试

.tlt
{
font-size:70px!important;
}

Answer 2

浏览器将两组CSS应用于页面：用户代理样式（浏览器“默认”）和作者样式（您的）。

用户代理样式设置标题字体大小等内容。它们直接定位<h1>并设置字体大小，通常约为2em。

您的样式定位父元素#who。某些属性（例如字体属性将>继承向下延伸到<h1>，但直接定位<h1>的声明将覆盖这些继承的值。用户代理样式的目标是<h1>正在执行此操作。

如果要覆盖用户代理样式，还需要定位<h1>。这就是为什么这样的工作原理：

h1 {
  font-size: 70px;
}

Answer 3

看，h1在id的div里面。现在，如果你设置#who div的字体大小，那么h1应该有它的字体大小但是在应用程序中会有一些字体大小为h1已经定义;所以它会覆盖#who div的字体大小。

h1:first-child

这将针对任何其他容器的所有第一个孩子。所以，理想情况下这不是一种正确的方法。

#who h1{font-size:70px;}

这样可以解决您的问题。

现在，如果您想要定位#who div的第一个孩子h1，请使用以下css

#who h1:first-child{font-size:70px;}

Answer 4

因为如果您的代码正是您发布的内容，则不要在css中使用id选择器。欲了解更多信息，请阅读 W3 CSS Selectors

根据更新的问题：适用于所有h1也与此有关因为你没有引用h1里面的＆＃39;谁＆＃39; id它选择所有这些。因为每个h1都是另一个元素的第一个孩子

请你改变

h1:first-child

到

#who h1:first-child

为什么我的css字体不变？

4 个答案: