关于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特异性中找不到任何相应的规则.

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

Answer 1

.my-header a是一个类型选择器和一个类选择器,它比.my-a一个类选择器更具体,没有别的.