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>

使用 Chrome DevTools 检查表明此 div 中所有文本的字体系列都继承自 p 和 h3 规则。有人能解释一下为什么会这样吗？

Answer 1

您需要为 h3 和 p tag 添加单独的 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>

Answer 2

#helvetica, #lora & #roboto 仅适用于 div 标签内没有 html 标签的任何字符。因为您用 h3 标签“包装”了 Helvetica，并且您有 h3 css 规则，它将替换适用于 #helvetica 标签的 div 规则。

看我的example

<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;
}

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

2 个答案: