html - 嵌套0​​x104567911时css优先级

Question

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

我认为这两个链接应该具有相同的颜色，因为在这两种情况下，最里面的元素都具有 .inner 类。但是在我对 firefox 和 chrome(基于)的测试中，在第一个链接上应用了 .container 后裔的 a 规则。

.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

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

说到 .inner: red有 2 个元素会受到影响 - 第一的 - 秒内跨度

第一个元素样式不会被红色覆盖，因为它具有高优先级。将以下值作为检查优先级的示例标签 - 1类 - 2id - 3(最高优先级)

id --> class --> 从左到右的元素(标签)优先级最高

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

因为有另一个类为'.inner'的元素(span)，它的颜色将变为红色