这是基本的,但我找不到我需要的东西。
<div class="coverTitle"><h1> The Best In Town </h1></div>
我想要调整我需要的文字:
.coverTitle>h1
{
text-align:center;
}
但是:
.coverTitle
{
text-align:center;
}
也有效。
另一方面,
.coverTitle
{
font-size: 10px;
}
不会影响该孩子的字体大小。
有些事情会影响孩子而其他事情不会影响孩子吗?
请参阅下面的工作代码段:
.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属性将从其父元素继承。
原因是因为<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>
实际上这应该有效。您忘记了HTML中的结束标记,这可能是问题的原因。如果没有,则CSS的另一个属性可能会应用并覆盖“font-size:10px”。您可以输入“font-size:10px!important”来尝试此假设。如果它有效,那是因为该属性在代码中的其他地方被有效覆盖。
.coverTitle {
font-size: 10px;
}
<div class="coverTitle"><h1> The Best In Town </h1></div>
要更改子元素的字体大小而不知道哪个标题标记是子元素,请尝试以下操作:
h1, h2, h3, h4, h5, h6{
font-size:inherit;
}
.coverTitle
{
font-size: 10px;
}
这将确保子元素从其父元素接收字体大小。如果要在范围中包含段落标记,请在h6之后包含p。确保在h6和p之间插入逗号。
为什么text-align会影响子div,而不会影响font-size?
它实际上是部分的
现在,用户代理(浏览器)将一些起点样式表应用于所有元素,并且因浏览器而异,在chrome的情况下,h1
获得font-size:2em
,这一点很重要,因为computed values
不会被覆盖遗产。
当你说
.coverTitle
{
font-size: 10px;
}
div.coverTitle
将获得font-size:10px
但h1
将获得font-size:20px
这是因为2em
乘以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>
<h1>Test</h1>
</div>
<h1 class="helper">Test</h1>