結論だけ言うと、競合するプロパティだけを指定するなら両者は一緒です。つまり、両方のルールにともに color
を指定するなら2つのコードの結果は同じです。それに対して、例えば案Bで li
のルールだけに color
を指定すれば当然リストの最初の要素にも文字色のプロパティが適用されますが、案Aでは同じようになりません。実際には中に書くプロパティの違いによって書き分けることになるでしょう。
しかしおそらくここでより重要なのは、CSSのルールがどのような順番で適用されるのか、ということです。案Bについて「〜の後で〜を上書き」と説明されていますが、CSSの決まりから言うと、コード上であとにあるものが優先的に適用されるとは限りません。実際、案Bの2つのルールの順番を変えても、li:first-child
のルールの方が優先されて適用されます(試してみてください)。
それでは、ある要素が複数のルールにマッチする場合は、どのように適用するルールが選択されるのでしょうか? 精密なルールについては Mozilla のドキュメント を見ていただきたいのですが、簡単に説明すると、まず !important
のついたルールが最優先、そこで同着なら 詳細度 (specificity) の高い方が優先、それでも同着ならコードの出現順で解決されます。
詳細度とは、大雑把にいえばルールがどれくらい細かいか、ということです。広くマッチするルールより細かいルールの方が優先される、ということですね。案Bでいえば、 li
より li:first-child
の方が細かいので優先されるということです。実際には次のようなルールになっています。
- IDセレクター (
#XXX
) の個数が多い方が優先。
- 同着なら、クラスセレクター (
.XXX
) 、属性セレクター ([href="..."]
) 、疑似クラス (:first-child
) の合計個数が多い方が優先。
- それでも同着なら、要素セレクター (
h1
) 、疑似要素 (::first-letter
) の合計個数が多い方が優先。
- それでも同着なら引き分け(ソースオーダーが用いられる)。
このあたりのルールを理解すれば、より自信をもってCSSを書けるようになると思います。興味があれば上にあげたリンクも読んでみてください。