我在搞乱特异性吗？这是怎么回事？

Question

我会简短而清晰。我有这个 html 代码 sn-p。

  <nav>
 <span class="heading"><a href="#">CodingHero</a></span>
        <ul>
            <li><a href="#Home" class="active">Home</a></li>
            <li><a href="#About">About</a></li>
            <li><a href="#Services">Services</a></li>
            <li><a href="#Contact">Contact</a></li>
         </ul>
   </nav>

现在我有了这个 CSS 部分

nav ul li a {
        font-family:'Poppins', sans-serif;
        font-size:20px;
        color:white;
        opacity:0.8;
        margin:0px 20px;
    }

这也没关系。但我在处理媒体查询时发现了这种奇怪的行为。

nav ul a {
            font-size:44px;
            background-color:yellow;
            margin:0px;
        }

我的背景颜色是黄色的。 但我的字体大小和边距不起作用。 一旦我提供了我最初在 CSS 部分中使用的特异性，

nav ul li a {
            font-size:44px;
            background-color:yellow;
            margin:0px;
        }

这行得通，我的字体大小和边距也生效了。 有人可以解释为什么我必须使用我最初用来让所有属性起作用的原始选择器吗？ 为什么在应用同一部分的背景颜色时未应用我的字体大小和边距。 这里发生了什么？任何让我头脑清醒的资源。 任何回应表示赞赏。 谢谢！

Answer 1

background-color:yellow; 被应用是因为另一个具有更高特异性的选择器（nav ul li a) 不包含 background-color 属性，因此没有任何内容会覆盖它。

---

如果你要添加一个喜欢

nav ul li a {
    font-family:'Poppins', sans-serif;
    font-size:20px;
    color:white;
    opacity:0.8;
    margin:0px 20px;
    background-color: red; /* added */
}

然后它将覆盖background-color:yellow，就像它覆盖margin 和font-size