我现在有一份 CSS。

然后我认为它的实际展现效果和预期不符。

考虑到我本来就才学两分钟 CSS 也不太懂怎么问问题就直接上图了。

<div class="member info container">
  <div class="info text">
    <div class="info title">此处在 hover 时应变为亮色</div>
    <div class="info intro">此处在 hover 时也应变为亮色</div>
  </div>
</div>

（上图中的鼠标指针正悬浮在 div.member.info.container 元素上）

对应 CSS 如下：

/* 原样式表中 52 行 */
.info:where(.title) {
    font-weight: bold;
    color: #555668; /* 暗色 */
}
.info:where(.intro) {
    font-style: italic;
    color: #888;  /* 暗色 */
}
/* 原样式表中 63 行 */
.member.info.container:hover {
    color: rgb(235, 165, 101) !important; /* 亮色 */
}

注意到 div.info.title 和 div.info.intro 的 color 属性，因为行数在更前的位置，特异性也更小，也没有 !important，故在鼠标悬浮在 div.member.info.container 元素上时，应被亮色覆盖。

但实际展现出来的效果是，特异性为 1 的两个规则的 color 属性并没有被特异性为 4 的规则覆盖。

我想要知道这是为什么 /kk