CSSの適用優先順位

以前から気になっていたけど、調べていなかったCSSの適用優先順位。
基本は、後で出てきた設定を優先する。
それよりも、詳細に書かれたセレクタを優先する。

試してみた。
redParagraphは、cssの一番最後のredを適用する。blueParagraphは、2つ目のblueを適用する。
html


<body>
<p class="redParagraph">これは赤色になる。</p>
<p class="blueParagraph">これは青色になる。</p>
</body>

css


p {
color: green;
}

p.blueParagraph{
color: blue;
}

p {
color: red;
}