シンプルなCSS継承で困惑しました

Question

私はかなり一般的なCSS継承状況であると思われますが、私はそれが思ったように動作していない理由を理解していません。ここで

は継承がだから私は 『#mainContentのP』のスタイルをオーバーライドします「.homeBoxのP」のために自分のスタイルを期待Chromeウェブデバッガ

から見たように見えるものです。そして、まだ...

#mainContent Pのスタイルは.homeBox pを上書きします。何がありますか？

Answer 1

IDスタイルはクラススタイルより優先されます。

一貫性のために、可能であればIDスタイルを使用しないようにしています。

また、サーバーサイドスクリプトで作業を開始するときにこれらを使用することを避けると、ASP.NETなどのようにIDを再レンダリングすることもできます。

Answer 2

順序は最初に特異性によって決定され、idはクラスよりも具体的です。

Answer 3

これは、#mainContentが他のセレクタよりも高い特異性を保持しているからです。その要素の最も具体的な記述であると判断され、上記のクラスに選択されています。

セレクタ支配するための規則は、W3ドキュメントで実証、かなり複雑である：​​

Answer 4

特異性、以前の回答で述べたように、正確です。最も簡単な修正はidsを使わないことです！あなたがする必要がある場合は、ネストされた要素、例えばのためにあなたのCSSを書くときに考慮にそれを取る：

#mainContent .homeBox p{font-size: 15px;}