Question

我不是CSS专家，所以以下让我感到困惑。我对CSS优先级的基本理解是声明越具体，它的优先级就越高。

因此我认为两个链接应该具有相同的颜色，因为在这两种情况下，最内层的元素具有类.inner。但在我使用firefox和chrome（基于）的测试中，在第一个链接上应用了a下降.container的规则。

.container a{
  color: green;
}
.inner {
  color: red;
}

<div class="container">
    <a href="google.com" class="inner">first</a>
    <a href="google.com" ><span class="inner">second</span></a>
</div>

我可以使用我用于第二个链接的解决方法解决我的问题，但如果我能理解发生了什么，我会更高兴。）

Answer 1

.container a由一个类选择器和一个类型选择器组成，因此它比.inner更具体，它只是一个类选择器。所以<a>元素是绿色的。

选择器仅匹配他们选择的元素，.container a与<span class="inner">second</span>不匹配，.inner不匹配。

此处的特异性无关紧要，因为只有一个匹配的选择器，因此跨度为红色。

如果.inner规则不存在，那么浏览器默认样式表会导致跨度为color: inherit，并且它将从父<a>元素中获取绿色值< em> 匹配 .container a。

Answer 2

CSS样式将从上到下应用首先，绿色将应用于标签

说到.inner：红色有2个元素会受到影响 - 首先 - 跨越第二个

第一个元素样式不会用红色覆盖，因为它具有高优先级。请考虑以下值作为检查优先级的示例标签 - 1 2级 - 2级 id - 3（最高优先级）

id - ＆gt; class - ＆gt;从左到右的元素（标签）是最高优先级

所以在你的情况下 .inner = 2 .container a = 2 + 1 = 3

由于存在另一个带有'.inner'类的元素（span），它的颜色将变为红色

Answer 3

我认为你可以这样理解： -

第一条规则将适用于这两个链接，因此<a>标记的字体颜色均为绿色，但是您的.inner规则具有红色，因此它将覆盖第一个规则到内部范围{ {1}}标记。

对于第一个<a>标记。。因为<a>标记规则中使用的父类，因此不会应用。所以它不会受到第二个规则的影响。