CSS の特異性、継承、カスケード-CSSチュートリアル-php.cn

CSS の特異性、継承、カスケード

黄舟

リリース： 2016-12-17 13:29:16

オリジナル

1143 人が閲覧しました

1. 特異性のルール

セレクターの特異性は、セレクター自体のコンポーネントによって決まり、その初期値は 0、0、0、0 です。

1. セレクター内の各 ID に 0、1、0、0 を追加します。

2. セレクター内の各クラス、疑似クラス、および属性の選択に 0、0、1、0 を追加します。 3. セレクター内の各要素または疑似要素に 0、0、0、1 を追加します。

4. 結合子とワイルドカードはセレクターの特異性に影響しません。

注:

1. 0、0、1、0 は 0、0、0、13 よりも具体的です。

2. ワイルドカード * の特殊性は 0, 0, 0, 0 であり、結合文字 (h1+p の「+」など) には特殊性がまったくありません。。

次のコードを見てください:

<head> 
<style> 
*{ 
color:red; 
} 
body{ 
color:cyan; 
} 
</style> 
</head> 
<body> 
<p>Whatkindofcolorthisparawillbe?</p> 
</body>

ログイン後にコピー

ページは次のように表示されます:

CSS の特異性、継承、カスケード 4. インラインスタイルの詳細度は 1、0、0、0 です。

5. !重要とマークされたステートメントは重要なステートメントと呼ばれますが、特別な特徴はありませんが、重要でないステートメントとは分けて考慮する必要があります。

具体的には: 重要でないステートメントは 1 つのグループにグループ化され、それらの間の競合は特異性を使用して解決されます。重要なステートメントは 1 つのグループにグループ化され、それらの間の競合は常に重要でないステートメントよりも優先されます。

2. 相続

1. 相続には特別な特徴はありません。これを覚えておくと、多くの問題を理解するのに役立ちます。

次のコードを参照してください:

<head> 
<style> 
p{ 
color:red; 
} 
</style> 
</head> 
<body> 
<p>Whatkindofcolorthis<ahref="#">link</a>willbe?</p> 
</body>

ログイン後にコピー

ページの効果:

CSS の特異性、継承、カスケード

要素の色が赤色に設定されているのに、要素の色は青色になっているのはなぜですか?

これは、要素が親要素の色を継承していないためではなく (以前そう考えていたことをお詫びします)、要素が

要素の色を継承しているためです。このスタイルはまったく特殊ではありません。ただし、はブラウザのデフォルトスタイルで設定されているため、はブラウザのデフォルトに従って表示されます。スタイル。

2. CSS での継承について: 一般的に、親要素のスタイルを継承できるのは子要素だけです。つまり、スタイルは DOM 内で上向きではなく下向きにのみ渡すことができますが、本文に適用される背景スタイルという例外があります。要素を上向きに渡すことができ、html 要素に渡すと、それに応じてキャンバスを定義できます。

3. スタッキング

スタッキングのルール:

1. 重量順に並べ替えます。読者向けの重要な声明 > 著者向けの重要な声明 > 読者向けの一般的な声明 > ユーザーエージェント向けの声明。

2. 重みが同じ場合、より高い特異性を持つものが勝ちます。

3. 特徴が同じ場合は、スタイルシートの順序に従って並べ替え、後から表示されたものが優先されます。

ところで、LoVe-HA の順序がリンクスタイルの宣言に使用されるのはまさにこのルールのためです (LoVe-HA は: link; :visited; :hover; ：アクティブ）。

上記は CSS の特異性、継承、カスケードに関する内容です。その他の関連記事については、PHP 中国語 Web サイト (www.php.cn) に注目してください。