知っておくべきCSSの3つの主要な機能

今回は、知っておくべきCSSの3大機能についてご紹介します。CSSの3大機能を使用する際の注意点は何ですか？実際の事例を見てみましょう。

CSS の 3 つの主要な機能: 継承、カスケード、優先順位

1. 継承とは何ですか?

機能: これを子要素でも使用できる属性を設定します。継承

注:

1. すべての属性を継承できるわけではなく、color/font-/text-/line- で始まる属性のみを継承できます

2. CSS 継承では、息子だけでなく子孫も相続できる

3.相続の特殊性

3.1 aタグの文字色と下線は継承できません(つまりつまり、継承によって取得することはできません)

3.2 hタグのテキストサイズは継承できません(つまり、継承によって取得することはできません)

アプリケーション シナリオ:

は通常、Web ページのテキストの色、フォント、テキスト サイズなどのいくつかの共通情報を設定するために使用されます。

body{} >>>本体に設定します

2. カスケード

1. カスケードとは何ですか?

機能: カスケードは競合を処理する CSS の機能です

注:

スタッキングは、複数のセレクターで「同じラベル」が選択されている場合にのみ機能します。 . すると、「同じ属性」が設定され、カスケードが発生します

CSS フルネーム Cascading StyleSheet (Cascading Style Sheet)

例:

<style>
        p{            color: red;
        }        .para{            color: blue;
        } </style>
 <p id="identity" class="para">我是段落</p>

3. 優先順位とは

機能:複数のセレクターが同じタグを選択し、同じタグに同じ属性を設定する場合、カスケードする方法は優先度によって決まります

2. 優先度を決定する 3 つの方法

2.1 間接選択は継承を指します

間接選択の場合は誰でも可能です。ターゲットラベルに近い場合は、それに最も近い人の言うことを聞きます

2.2 同じセレクター (直接選択)

それらがすべて直接選択されており、すべて同じタイプのセレクターである場合は、後に書く人は誰でも言うことを聞きます

2.3 異なるセレクター (直接選択)

それらがすべて直接選択され、同じ種類のセレクターではない場合、セレクターの優先順位に従ってカスケードされます:

id>class>label> ;Wildcard>Inheritance> ;ブラウザデフォルト

id>標準>パス>フォロー>閲覧

4. !重要

機能とは: 特定の属性の優先度を直接選択する場合に使用します。タグのセレクターを使用すると、指定した属性の優先順位を最高に上げることができます。

注:

1.!重要は、直接選択にのみ使用できます。 間接選択には使用できません ;

2. ワイルドカード セレクターで選択されたタグも直接選択され、! important を使用して優先度を上げることもできます

3. ! important は、指定された属性の優先度のみを高めることができます。増やすことはできません

4.! important は属性値のセミコロンの前に記述する必要があります

5. ! important の前の感嘆符は省略できません

 <style>
      p{
         color: red !important; //提升优先级到最高
         font-size: 30px; //不会提升优先级(说明了上面的第3点)
       }  </style>

5. 優先度の重み

1.は優先度の重みですか?

機能: 複数のセレクターが混在している場合、重みを計算することで誰が最も高い優先度を持つかを決定できます

2. 重みの計算ルール

2.1 まずセレクターの数を計算します。 ID の数が多いセレクターが最も優先されます

2.2 ID の数が同じ場合、クラス名の数に注目すると、クラス名の数が多いセレクターが最も優先されます

2.3 クラス名の数が同じ場合、次にタグ名の数を見て、タグ名の数が多い方が優先されます

2.4 IDの数が同じ、クラス名の数が同じ、タグ名の数が同じであれば、下向きに計算すると、次に書く人はこの時点で他の人の意見を聞くことになります

つまり、優先順位が同じであれば、次に書く人は他の人の意見を聞くことになります

注:

1)セレクターのみがタグを直接選択します。重みを計算する必要があります。そうでない場合は、直接選択されたセレクターをリッスンします。

2) ワイルドカードの重みは 0 です

を読んだ後、この方法を習得したと思います。この記事のケースについては、さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

推奨書籍:

iOS WebView で HTMLString をロードする方法

見落とされやすい HTML5 のヒント

以上が知っておくべきCSSの3つの主要な機能の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。