CSS低特定性规则覆盖高特定性

Question

我现在正在进行一个在线web开发课程，并一直在构建一些网页来学习HTML和CSS。特别是。我的问题是，在页面中，我的p和h3元素类型样式规则中的字体系列规则正在覆盖特定ID选择器中的字体家族规则。我能够通过链接选择器来解决这个问题，但我不明白为什么会发生这种情况。

这是我尝试格式化的HTML的一部分：

h3 {
font-family: Helvetica, sans-serif;
font-size: 24px;
}
p {
font-family: "Roboto", sans-serif;
}
.font-container {
display: inline-block;
width: 45%;
}
.caps {
text-transform: uppercase;
}
#helvetica{
font-family: Helvetica, sans-serif;
}
#roboto{
font-family: "Roboto", sans-serif;
}
#lora{
font-family: "Lora", serif;
}

<div class="container">
<h2>Fonts</h2>
<div class="font-container" id="helvetica">
<h3>Helvetica</h3>
<div class="normal">
<p>The quick brown fox jumps over the lazy dog.</p>
<p><em>The quick brown fox jumps over the lazy dog.</em></p>
<p><strong>The quick brown fox jumps over the lazy dog.</strong></p>
</div>
<div class="caps">
<p>The quick brown fox jumps over the lazy dog.</p>
<p><em>The quick brown fox jumps over the lazy dog.</em></p>
<p><strong>The quick brown fox jumps over the lazy dog.</strong></p>
</div>
</div>
<div class="font-container" id="roboto">
<h3>Roboto</h3>
<div class="normal">
<p>The quick brown fox jumps over the lazy dog.</p>
<p><em>The quick brown fox jumps over the lazy dog.</em></p>
<p><strong>The quick brown fox jumps over the lazy dog.</strong></p>
</div>
<div class="caps">
<p>The quick brown fox jumps over the lazy dog.</p>
<p><em>The quick brown fox jumps over the lazy dog.</em></p>
<p><strong>The quick brown fox jumps over the lazy dog.</strong></p>
</div>
</div>
<div class="font-container" id="lora">
<h3>Lora</h3>
<div class="normal">
<p>The quick brown fox jumps over the lazy dog.</p>
<p><em>The quick brown fox jumps over the lazy dog.</em></p>
<p><strong>The quick brown fox jumps over the lazy dog.</strong></p>
</div>
<div class="caps">
<p>The quick brown fox jumps over the lazy dog.</p>
<p><em>The quick brown fox jumps over the lazy dog.</em></p>
<p><strong>The quick brown fox jumps over the lazy dog.</strong></p>
</div>
</div>

使用ChromeDevTools进行检查表明，该div中所有文本的字体家族都是从p和h3规则继承而来的。有人能解释一下为什么会发生这种事吗？

Answer 1

#helvetica、#lora&#roboto仅适用于div标记中没有html标记的任何字符。因为您用h3标记"包装"Helvetica，并且您有h3-css规则，所以它将替换适用于div标记的#helvetica规则。

请参阅我的示例

<div class="container">
<h2>Fonts</h2>
<div class="font-container" id="helvetica">
<h3>Helvetica</h3>
This text will inherit from #helvetica rules
<div class="normal">
<p>The quick brown fox jumps over the lazy dog.</p>
<p><em>The quick brown fox jumps over the lazy dog.</em></p>
<p><strong>The quick brown fox jumps over the lazy dog.</strong></p>
</div>
<div class="caps">
<p>The quick brown fox jumps over the lazy dog.</p>
<p><em>The quick brown fox jumps over the lazy dog.</em></p>
<p><strong>The quick brown fox jumps over the lazy dog.</strong></p>
</div>
</div>
<div class="font-container" id="roboto">
<h3>Roboto</h3>
This text will inherit from #roboto rules  
<div class="normal">
<p>The quick brown fox jumps over the lazy dog.</p>
<p><em>The quick brown fox jumps over the lazy dog.</em></p>
<p><strong>The quick brown fox jumps over the lazy dog.</strong></p>
</div>
<div class="caps">
<p>The quick brown fox jumps over the lazy dog.</p>
<p><em>The quick brown fox jumps over the lazy dog.</em></p>
<p><strong>The quick brown fox jumps over the lazy dog.</strong></p>
</div>
</div>
<div class="font-container" id="lora">
<h3>Lora</h3>
This text will inherit from #lora rules
<div class="normal">
<p>The quick brown fox jumps over the lazy dog.</p>
<p><em>The quick brown fox jumps over the lazy dog.</em></p>
<p><strong>The quick brown fox jumps over the lazy dog.</strong></p>
</div>
<div class="caps">
<p>The quick brown fox jumps over the lazy dog.</p>
<p><em>The quick brown fox jumps over the lazy dog.</em></p>
<p><strong>The quick brown fox jumps over the lazy dog.</strong></p>
</div>
</div>
</div>

h3 {
font-family: Helvetica, sans-serif;
font-size: 24px;
}
p {
font-family: "Roboto", sans-serif;
}
.font-container {
display: inline-block;
width: 45%;
}
.caps {
text-transform: uppercase;
}
#helvetica{
font-family: 'Helvetica', sans-serif;
}
#roboto{
font-family: "Roboto", sans-serif;
}
#lora{
font-family: "Lora", serif;
}

Answer 2

您需要为h3和ptag添加单独的css

h3 {
font-family: Helvetica, sans-serif;
font-size: 24px;
}
p {
font-family: "Roboto", sans-serif;
}
.font-container {
display: inline-block;
width: 45%;
}
.caps {
text-transform: uppercase;
}
#helvetica,
#helvetica h3,
#helvetica p{
font-family: Helvetica, sans-serif;
}
#roboto,
#roboto h3,
#roboto p{
font-family: "Roboto", sans-serif;
}
#lora,
#lora h3,
#lora p{
font-family: "Lora", serif;
}

<div class="container">
<h2>Fonts</h2>
<div class="font-container" id="helvetica">
<h3>Helvetica</h3>
<div class="normal">
<p>The quick brown fox jumps over the lazy dog.</p>
<p><em>The quick brown fox jumps over the lazy dog.</em></p>
<p><strong>The quick brown fox jumps over the lazy dog.</strong></p>
</div>
<div class="caps">
<p>The quick brown fox jumps over the lazy dog.</p>
<p><em>The quick brown fox jumps over the lazy dog.</em></p>
<p><strong>The quick brown fox jumps over the lazy dog.</strong></p>
</div>
</div>
<div class="font-container" id="roboto">
<h3>Roboto</h3>
<div class="normal">
<p>The quick brown fox jumps over the lazy dog.</p>
<p><em>The quick brown fox jumps over the lazy dog.</em></p>
<p><strong>The quick brown fox jumps over the lazy dog.</strong></p>
</div>
<div class="caps">
<p>The quick brown fox jumps over the lazy dog.</p>
<p><em>The quick brown fox jumps over the lazy dog.</em></p>
<p><strong>The quick brown fox jumps over the lazy dog.</strong></p>
</div>
</div>
<div class="font-container" id="lora">
<h3>Lora</h3>
<div class="normal">
<p>The quick brown fox jumps over the lazy dog.</p>
<p><em>The quick brown fox jumps over the lazy dog.</em></p>
<p><strong>The quick brown fox jumps over the lazy dog.</strong></p>
</div>
<div class="caps">
<p>The quick brown fox jumps over the lazy dog.</p>
<p><em>The quick brown fox jumps over the lazy dog.</em></p>
<p><strong>The quick brown fox jumps over the lazy dog.</strong></p>
</div>
</div>