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

Answer 1

{.my-header a是类型选择器和类选择器，比类选择器.my-a更具体。