html - 最后一个 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

不，因为第一个规则有更高的 specificity比其他人。

“最后一个获胜”规则仅适用于具有相同特异性的 CSS 规则。