not() 和 first-child 选择器之间的特殊性

Question

所以我们有以下关于 not() 和 p:first-child{} 的示例 selectors.Here 是示例：

<!DOCTYPE html>
<html>
<head>
<style>
p:first-child{
color: red;
}
p:not(a){
    color: green;
}
</style>
</head>
<body>

<p>This a paragraph.</p>

</body>
</html>

为什么段落最后是红色的？有人可以解释（如果可能的话）为什么 p:first-child{} 比 not() 选择器具有更大的特异性吗？？？

Answer 1

Can somebody explain (if possible ) why the p:first-child{} has bigger specificity than not() selector?

因为 :not() 对特异性本身没有任何影响——只有它内部的内容才算特异性。

所以你有元素选择器 p 和伪 class :first-child，它给出了 0-0-1-1 的特异性 - 你有元素选择器 p 和 a，结果是 0-0-0-2.

not() 和 first-child 选择器之间的特殊性

Specificity between not() and first-child selectors

html

css

css-selectors

css-specificity