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

Question

我会简明扼要。我有这个 html 代码片段。

  <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

一样

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

Am I messing with specificity ? What's going on?

html

css

css-selectors

css-specificity