为 css 中的 class 的 child 设置不同的样式

Question

除了看到两个不同的font-size，但是都一样font-size

<div class="entry">
<h3>Headquarter 1</h3>
</div>

<div class="h3-block">
<h3>Headquarter 2</h3>
</div>

.h3-block > .h3, h3 {
    font-size: 1.125rem;
}

.entry > .h3, h3 {
    font-size: 1.75rem;
}

Answer 1

.h3-block > h3 {
    font-size: 1.125rem;
}

.entry > h3 {
    font-size: 1.75rem;
}

<div class="entry">
<h3>Headquarter 1</h3>
</div>

<div class="h3-block">
<h3>Headquarter 2</h3>
</div>

Answer 2

如果你把 ,h3 应用所有 h3 标签作为 font-size: 1.75rem; 删除它。

另一个缺失是 .h3 意味着你有元素 class 是 h3 但你没有这样的元素 class 你需要写 h3

.h3-block > h3{
    font-size: 1.125rem;
}

.entry > h3 {
    font-size: 1.75rem;
}

如果您有 h3 的默认字体大小，也将其置于其他字体之上

h3{
   font-size: 1.125rem;// here your default value
}
.h3-block > h3{
    font-size: 1.125rem;
}
.entry > h3 {
    font-size: 1.75rem;
}

为 css 中的 class 的 child 设置不同的样式

Set different style for child of class in css

html

css

font-size