最后一个p属性不应该覆盖它上面的所有p属性吗？

Question

<style>
#content p {color: yellow;}
p {color: purple;}
p {color: green;}
</style>

当我运行代码时,所有p变为黄色而不是绿色(这是我所期望的.)

这里的HTML代码:

<div id="content">
<p>Duis autem vel eum </p>
<p>Duis autem vel eum </p>
<p>Duis autem vel eum </p>
</div>

Answer 1

不,因为第一条规则比其他规则具有更高的特异性.

"最后一个胜利"规则仅适用于具有相同特异性的CSS规则.