为何CSS类选择器样式优先级未高于类型选择器？

我正在学习CSS特异性规则，尝试用类选择器.grandparent和类型选择器p修改.grandparent内所有段落的颜色。我认为类选择器比类型选择器更具特异性，且color是可继承属性，所以预期.grandparent内的所有p元素颜色为salmon，但实际并未生效，想知道原因。

代码示例 #

HTML #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="index.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>Inside Body</p>
    <div class="grandparent">
        <p>Inside Grand Parent Div</p>
        <div class="parent">
            <p>Inside Parent Div</p>
            <div class="child">
                <p>Inside Child Div</p>
                <button class="warning">
                    what color background?
                  </button>
            </div>
        </div>
    </div>
</body>
</html>

CSS #

p{
    color: green;
}
.grandparent{
    color: salmon;
}

原因解析与解决方案 #

核心问题在于继承的样式不具备特异性权重，优先级远低于直接匹配元素的样式：

• 你给.grandparent设置的color: salmon是通过CSS继承传递给内部p元素的，继承来的样式没有任何特异性权重。
• 而p { color: green; }是直接匹配所有p元素的类型选择器，它的特异性权重为(0,0,1)，优先级高于继承来的样式，因此所有p元素都会显示绿色。

要实现预期效果，需要直接匹配.grandparent内部的p元素，使用后代选择器即可：

p {
    color: green;
}
.grandparent p {
    color: salmon;
}

此时.grandparent p的特异性权重为(0,1,1)，高于单独的p选择器，所以.grandparent内部的所有p元素会显示salmon色。

内容的提问来源于stack exchange，提问作者novice