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

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

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

Answer 2

没关系，你的 p 变成了黄色，因为 css 优先级。阅读这篇文章，它可以帮助你。