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

いいえ、最初のルールは他のルールよりも特異性が高いためです。

「最後の1つが勝つ」ルールは、CSSルールが同じ特異性を持っている場合にのみ適用されます。

Answer 2

css の優先順位により、p が黄色になりました。この記事を読むと、役に立ちます。