CSS 组合器是否为 CSS 选择器添加了特异性？

Question

mdn article about CSS specificity 声明：

通用选择器（*）、组合符（+、>、~、''）和否定伪类（:not()）对特异性没有影响。 （但是，在 :not() 中声明的选择器可以。）

但是我的经验是组合器确实有效果，请看这个例子：

div > p {
  color: red;
}

p {
  color: green;
}

<div>
  <p>First Paragraph</p>
  <p>Second Paragraph</p>
</div>

所以上面的引用声称，CSS 组合器对特异性没有影响。如果该引用是正确的，那么它是什么意思，正如我的代码示例显示的相反？

Answer 1

您的 sn-p 中的问题是您在第一条规则中有两个选择器（div > p），而在第二条规则中只有一个选择器（p），因此第一条规则更具体，所以文章是正确的。

请参阅下面的 sn-p 使用相同的 2 个选择器，但第一个具有组合器 >，因为它们具有相同的特异性，后者将由于级联而适用。

div > p {
  color: red;
}

div p {
  color: green;
}

<div>
  <p>First Paragraph</p>
  <p>Second Paragraph</p>
</div>

您可以在下面查看div p、div > p 和p 的特异性