css - 关于 CSS 特异性的案例

Question

我有像这样的html：

header {
  width: 100%;
  height: 50px;
}

a {
  color: red;
}

.my-a {
  color: green;
}

<header class="my-header">
  <div>
    <a class="my-a" href="https://www.google.com">clickme</a>
  </div>
</header>

然后“clickme”将按预期显示为绿色。它遵循类选择器比类型选择器具有更大特异性的规则。

但是当css变成：

header {
  width: 100%;
  height: 50px;
}

.my-header a {
  color: red;
}

.my-a {
  color: green;
}

<header class="my-header">
  <div>
    <a class="my-a" href="https://www.google.com">clickme</a>
  </div>
</header>

结果显示“clickme”是红色的，这超出了我的预期。我在MDN specificity中找不到任何相应的规则。

我在这里错过任何规则吗？JSFiddle

标签： css

Answer 1

.my-header a是一个类型选择器和一个类选择器，它比.my-a哪个是类选择器更具体，仅此而已。