关于CSS特异性的案例[重复]答案

【问题标题】：case on css specificity [duplicate]关于CSS特异性的案例[重复]
【发布时间】：2019-03-04 06:39:42
【问题描述】：

我有类似的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

【解决方案1】：

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

【讨论】：

我很困惑 MDN 说通用选择器 (*)、组合符 (+, >, ~, ' ') 和否定伪类 (:not()) 对特异性没有影响。说组合子对特异性没有影响实际上是什么意思？
@39ecneret — .my-header a / .my-header + a / .my-header :not(a) / :not(.my-header) > a — 都有一个类选择器和一个类型选择器，并且具有相同的特异性。组合器不会改变特异性。只是选择器。