Question

我有这个简单的CSS代码：

p.child-class {
    color: red;
}

.parent-class p {
    color: green;
}

HTML：

<div class="parent-class">
    <p class="child-class"></div>
</div>

正在应用选择器.parent-class而不是更高特异性选择器p.child-class。那是为什么？
这是一个Fiddle。

修改

我知道两者具有相同的特异性。在这种情况下，如果我不能编辑父类的代码，如何增加子类的特异性呢？

Answer 1

选择器.parent-class p和p.child-class具有完全相同的CSS特性，两者都有1个标签选择器和1个类选择器。稍后将出现在代码中的选择器。

Answer 2

您的两条规则具有不同的含义

.parent-class p

指定p的规则，该规则位于具有类.parent-class

的容器内

p.child-class

指定p具有类child-class

的规则

Answer 3

如上所述，它们具有相同的特异性，规则的顺序很重要。

添加.parent-class会改变特异性

.parent-class p.child-class {

然后订单无关紧要。

Answer 4

您可以使用!important