伪类继承理解

Question

我认为伪类从它们的父元素继承属性，但实际上父元素似乎专门选择了它的所有伪类，即使它们没有被指定。

例如，给定 HTML：

<a href="#" id="id-selector">ok</a>

和 CSS：

#id-selector {
  color: green;
}

a:any-link {
  color: red;
}

我认为 color: green 只会被伪类 any-link继承，因此会被 a:any-link 覆盖 选择器，因为这是伪类的特定选择器，并且特定选择器会覆盖继承的属性，即使它们具有较低的特异性。但是上面的输出是一个绿色的链接，说明#id-selector是专门针对any-link的，而不是被继承的。

具有较低特异性的特定选择器覆盖具有较高特异性的继承属性的示例：

HTML -

<div id="id-has-high-specificity">
    <h1 class="class-has-low-specificity">Heading</h1>
</div>

CSS -

.class-has-low-specificity {
  color: green;
}

#id-has-high-specificity {
  color: red !important;
}

这里的输出是绿色的，这是预期的，因为标题只是从第二条规则继承而来，而是由第一条规则专门选择的。

我认为这同样适用于伪类，因为伪类从其父元素继承。但从我的第一个示例看来，它们没有，而是父元素专门选择它的所有伪类，即使它们没有被指定。

那么是不是伪类不从其父元素继承任何属性，而是父元素在定义规则时专门设置其所有伪类，即使没有指定那些伪类？

Answer 1

CSS 根据一组优先规则确定哪个选择器“获胜”。

例如来自MDN:

选择器类型 以下选择器类型列表增加了 特异性：

1. 类型选择器（例如 h1）和伪元素（例如 ::before）。

2. 类选择器（例如，.example），属性选择器（例如， [type="radio"]) 和伪类（例如：hover）。

3. ID 选择器（例如，#example）。

所以在问题中给出的例子中：

<a href="#" id="id-selector">ok</a>
and CSS:

#id-selector {
  color: green;
}

a:any-link {
  color: red;
}

颜色不会变为红色，因为 id 选择器优先，即使 a 的设置位于“级联”之后。

这是一个颜色确实发生变化的 sn-p（对于这个悬停示例）：

#id-selector {
  color: green;
}

a#id-selector:hover {
  color: lime;
}

a:hover {
  color: red;
}
</style>

<a href="#" id="id-selector">ok</a>

更新 从 cmets 我想知道是否对伪元素（和类）有一些混淆 - 它们是一个元素的“一部分”，它们不是“父”元素的子元素。

这个 sn-p 有一个父/子，在这种情况下，问题中假设的特异性有效：

#id-selector {
  color: green;
}

a:hover {
  color: red;
}

<div id="id-selector"><a href="#">ok</a></div>