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

问题描述

我会简短明了。我有这个 html 代码片段。

import * as admin from 'firebase-admin';
import * as firebase_tools from 'firebase-tools';
import * as functions from 'firebase-functions';

const PROJECT_ID = JSON.parse(process.env.FIREBASE_CONfig).projectId;

admin.initializeApp(); // config is automatically filled if left empty
                       // although it isn't needed here

export const firestore_delete_trigger_test = functions.firestore
  .document('collection1/{docs1}/collection2/{docs2}')
  .onDelete(async (snapshot,context) => {     
    const path = snapshot.ref.path;

    await firebase_tools.firestore
      .delete(path,{
        project: PROJECT_ID,recursive: true,yes: true,token: functions.config().fb.token
      });

    return {
      path: path
    };
  });

现在我有了这个 CSS 部分

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

这也可以。但是我在处理内部媒体查询时发现了这种奇怪的行为。

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

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

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

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

解决方法

应用

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