CSSにおけるスタイルの優先順位を理解する：CSSスタイルの優先順位の説明

この記事では、CSS スタイルの優先順位について紹介し、CSS スタイルの優先順位について詳しく説明します。

CSS スタイルを要素に適用しようとしたものの、効果がなかったという状況に陥ったことはありますか?ページは定義した CSS を無視しているように見えますが、その理由はわからないかもしれません。たぶんそうするでしょう！重要な場合は、最後の手段としてインライン スタイルを追加してください。しかし、実際には、あなたが抱えている問題はおそらく CSS の優先順位の 1 つです。 (推奨コース: css ビデオ チュートリアル )

どの CSS スタイルを最初に使用するかをより深く理解すると、CSS コードをより明確かつ体系的に作成できるようになります。特定の HTML を制御する 要素の 3 つの CSS ルール:

css 優先度の計算

css 継承

css カスケード

これらのルールを学習するCSS 開発を次のレベルに引き上げます。

優先度の計算

HTML に、「生き物」のタイプが適用された段落が含まれていると想像してください。次の 2 つの CSS ルールもあります。

p { font-size ：12px }
p.bio { font-size ：14px }

段落内のテキスト サイズを 12px または 14px にしますか?この場合は 14px になると推測できます。 CSS (p.bio) の 2 行目は、class="bio" 段落よりも具体的です。ただし、優先順位が見えにくい場合もあります。

たとえば、次の HTML と CSS を考えてみましょう

<div id = “sidebar” >
<p class = “bio” >文字在这里</ p>
</ div>

div p.bio { font-size ：14px }
#sidebar p { font-size ：12px }

一見すると、CSS の 1 行目がより具体的に見えるかもしれませんが、実際には、上の 2 行目のほうが段落のフォントとの一貫性が高くなります。サイズ。何故ですか？

この質問に答えるには、優先順位のルールを考慮する必要があります。

特異性は、CSS のさまざまなコンポーネントを数え、(a、b、c、d) の形式で表現することによって計算されます。これは例でより明確になりますが、まずコンポーネントについて説明します。

要素、疑似要素: d = 1 - (0,0,0,1)

クラス、疑似クラス、属性: c = 1 - (0,0,1, 0)

Id: b = 1 - (0,1,0,0)

インライン スタイル: a = 1 - (1,0,0,0)

ID は、要素ではなくクラスよりも具体的です。

上記のそれぞれを計算し、a、b、c、または d に 1 を加算することで優先度を計算できます。 0,0,1,0 は 0,0,0,15 よりも具体的であることに注意することも重要です。計算をわかりやすくするために、いくつかの例を見てみましょう。

p: 1 要素 - (0,0,0,1)

div: 1 要素 - (0,0,0,1)

#サイドバー :1要素、1 ID - (0,1,0,0)

div#sidebar: 1 要素、1 ID - (0,1,0,1)

div#sidebar p: 2 要素、1 ID - (0,1,0,2)

div#sidebar p.bio: 2 要素、1 クラス、1 ID - (0,1,1 ,2)

上の例をもう一度見てみましょう

div p.bio { font-size ：14px }  - （0,0,1,2）
#sidebar p { font-size ：12px }  - （0,1,0,1）

2 番目の方が優先度が高いため、優先されます。

次に進む前に、最後に 1 つポイントがあります。使用するときは重要性が優先されます。 CSS 属性を重要とマークすると、優先順位ルールなどが上書きされます。

div p.bio { font-size ：14px ！important }    
#sidebar p { font-size ：12px }

は、上記の CSS の最初の行が、2 行目ではなく 2 行目よりも優先されることを意味します。 ！それでも重要なのは、基本的なルールを取り巻く特殊性です。ルールがどのように機能するかを理解していれば、これらのルールは必要ありません。

継承

継承の背後にある考え方は比較的理解しやすいです。要素は親コンテナからスタイルを継承します。 body タグが color:red を使用するように設定されている場合、特に指定がない限り、本文内のすべての要素のテキストも赤になります。

ただし、すべての CSS プロパティが継承されるわけではありません。たとえば、マージンとパディングは非継承プロパティです。 div にマージンやパディングを設定した場合、div 内の段落は div に設定したマージンやパディングを継承しません。別の宣言をするまで、段落ではブラウザのデフォルトのマージンとパディングが使用されます。

ただし、プロパティを明示的に設定して、親コンテナからスタイルを継承することもできます。たとえば、

p { margin ：inherit ; 填充：继承 }

を宣言すると、段落はその要素を含む要素を継承します。

カスケード

最高レベルでは、カスケードはすべての CSS 優先度を制御し、次のように機能します。

1. 関連する要素と属性に適用されるすべての CSS 宣言を検索します。

2. 産地と重量で並べ替えます。 Origin は宣言のソース (作成者スタイル、ユーザー スタイル、ブラウザのデフォルト値) を指し、重みは宣言の重要性を指します。 (作成者の重みがユーザーの重みより大きい。!重要は通常の宣言より重要)

3. 2 つのルールがある場合の優先順位を計算します。上記のルールはすべて同じなので、最後のルールが勝ちます。 HTML に埋め込まれた CSS は、HTML 内の順序に関係なく、常に外部スタイルシートの後に配置されます。

#3 は、おそらく最も注意する必要があることです。 #2 では、ルールを重要に設定しない限り、ユーザーのブラウザーの設定方法がスタイルによって上書きされることを理解してください。

また、スタイルはブラウザーのデフォルトをオーバーライドしますが、これらのデフォルトは存在し、ブラウザー間で問題が発生することがよくあることにも注意してください。 Eric Meyer の CSS Reset や Yahoo の YUI Reset CSS などのリセット ファイルを使用すると、デフォルトのスタイルを不要にすることができます。

要約

上記の内容が、CSS の優先順位の問題のいくつかを明確にするのに役立つことを願っています。ほとんどの場合、スタイルが矛盾する場合、問題は優先順位に帰着します。一部の CSS を宣言していないにもかかわらず、要素が親コンテナまたはブラウザのデフォルト スタイルから一部の CSS を継承している可能性があり、予期しない方法で動作する場合があります。

CSS を宣言するときの一般的な経験則は、要素のスタイルを設定するための優先順位が最も低い属性を宣言することです。たとえば、div#sidebar の代わりに #sidebar を使用します。この一般ルールを必要以上に破っていることは認めますが、必要最小限の優先順位を使用することで、より具体的なスタイルを宣言してスタイルをオーバーライドすることが容易になります。

最高の優先順位を使用すると、後で問題が発生し、優先順位を追加するために不要な HTML を追加しなければならなくなったり、もう使用しなくなったりする可能性があります。重要であるか、スタイルをインラインで宣言します。最小の優先順位から始めて、必要な場合にのみ優先順位を追加してください。

以上がCSSにおけるスタイルの優先順位を理解する：CSSスタイルの優先順位の説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。