css - CSS 较低特异性规则覆盖较高特异性规则

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。这是为什么？
这是一个小提琴。

编辑

我知道两者具有相同的特异性。在那种情况下，如果我无法编辑父母的班级代码，如何增加孩子班级的特异性？

score 3 · Accepted Answer

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

score 2 · Accepted Answer

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

.parent-class p

这指定了p在具有类的容器内的规则.parent-class

p.child-class

这指定了p具有类的规则child-class

score 1 · Accepted Answer

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

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

.parent-class p.child-class {

然后顺序无关紧要。

score -1 · Accepted Answer

-1

你可以使用!important

于 2013-07-28T21:41:11.077 回答

4 回答 4