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

Question

Universal selector (*), combinators (+, >, ~, ' ') and negation pseudo-class (:not()) have no effect on specificity. (The selectors declared inside :not() do, however.)

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

div > p {
  color: red;
}

p {
  color: green;
}

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

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

Answer 1

您的代码段中的问题是您在第一条规则中有两个选择器 (div > p)，而在第二条规则中只有一个选择器 (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 的具体情况

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

Do CSS combinators add specificity to a CSS selector?

html

css

css-selectors

css-specificity