css相同特殊性

Question

p.intro{
    color: red;
}

div div div div div div div div div div p{
    color: blue;
}

<div><div><div><div><div><div><div><div><div><div>
<p class="intro">second</p>
</div></div></div></div></div></div></div></div></div></div>

为什么后面的没有覆盖前面的？

Answer 1

你可能把特殊性的计算方式搞错了

第一个选择器的特殊性是 0, 0, 1, 1
第二个选择器的特殊性是 0, 0, 0, 11 不能进位!

第一个选择器的特殊性大于第二个，所以 div div div div div div div div div div p 是覆盖不了 p.intro 的

Answer 2

!important > ID >类>属性 >标签>*

从css选择器的优先级上来看。

Answer 3

优先级的问题
在后面加上!important试一试