时间戳

首页 > 解决方案 > 我在搞乱特异性吗？这是怎么回事？

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

问题描述

我会简短而明确。我有这个 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;
        }

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

标签： htmlcsscss-selectorscss-specificity

解决方案

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

推荐阅读