同じ要素のCSSファイル内の2つの要素セレクタはどのように処理されますか？

Question

パートA：
この例では、主要なブラウザごとにどのような結果が得られると思いますか？ 次のCSSが1つのファイルに含まれているとします。

p { 
     border:1px solid black 
    } 

.... further down the same css ..... 

p { /* repeated element selector */ 
    font-size:20px 
    } 

パートB：
は結果のいずれかが、これは、外部スタイルシート

対<style>であれば、私はそれがあるスタイルシートを作成するための開発者のための一般的である年間で発見した変更されます多くのセレクタがあるので、セレクタはさまざまなスタイルで何度も何度も繰り返されます。

Answer 1

スタイルシートで同じ要素を複数回指定することはよくあります。あるスタイルシートにデフォルトのスタイルがあり、別のスタイルシートにテーマスタイルがあるCMSがある場合は、デザインのさまざまな側面に対応する別々のスタイルシートがある場合は非常に一般的です。

また、サイトがすべてのスタイルシートを1つのファイルにマージしてダウンロードしてサーバーの負荷を節約することもよくあります。

したがって、単一のスタイルシートが同じタグ、クラス、またはIDへの複数の参照を持つことは非常に一般的です。

良いニュースは、本当に問題ではないということです。同じことを複数回指定すると、CSSはマージされたものとして扱います。両方の宣言でまったく同じスタイルを使用している場合は、前者のスタイルを上書きします。これは、テーマのスタイルがCMSのデフォルトスタイルを上書きできるようにするものです。

唯一の例外は、!importantマーカーを使用した場合です。これにより、重要なラベルが付いているものを他のものよりも優先させることができます。

質問のパートB：いいえ、同じです。外部CSSファイルを介してロードされるスタイルと、メインHTMLページにインラインでロードされるスタイルには違いはありません。

一般的には、外部のCSSファイルを使用して読み込むのが最も一般的ですが、HTMLページとは別にブラウザでキャッシュすることができます。つまり、ユーザーが複数のページにアクセスすると、サイト。

Answer 2

パートA：pには枠線とフォントサイズの両方が設定されます。あなたがそのようにルールを適用する場合は、この方法をやってようなものだ：

p{ 
    border:1px solid black; 
    font-size:20px; 
} 

問題は、これらのようなCSSのスニペットについて：

ここ

p{ 
    border:1px solid black; 
} 
... 
p{ 
    border:10px solid black; 
} 

は、国境が上書きされます！ ！全く

：！;：「！重要な」

パートB 1pxの黒一色の重要なあなたは「オリジナル」1ピクセルの境界線を維持したい場合は、（すなわち境界線を最初の境界ルールに適用されるCSS2ルールを使用する必要があります

Answer 3

結果は以下のようになります。後で同じセレクタに同じCSSプロパティを定義する場合、それはつもり上書きすることが

p { 
border:1px solid black; 
font-size:20px; 
}

、例えば：

p { 
     border:1px solid black 
     font-size: 12px; 
    } 

.... further down the same css ..... 

p { /* repeated element selector */ 
    font-size:20px 
    } 

は次のようになります。

p { 
border:1px solid black; 
font-size:20px; 
}

編集：B： 違いはありません。