ホームページ > 記事 > ウェブフロントエンド > CSS の特異性、継承、カスケード
CSS の特異性、継承、カスケード
- 黄舟オリジナル
- 2016-12-17 13:29:161179ブラウズ
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>ページは次のように表示されます:
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>ページの効果:
要素の色が赤色に設定されているのに、 要素の色は青色になっているのはなぜですか?
これは、 要素が親要素の色を継承していないためではなく (以前そう考えていたことをお詫びします)、 要素が 要素の色を継承しているためです。このスタイルはまったく特殊ではありません。ただし、 はブラウザのデフォルト スタイルで設定されているため、 はブラウザのデフォルトに従って表示されます。スタイル。 2.
CSS での継承について: 一般的に、親要素のスタイルを継承できるのは子要素だけです。つまり、スタイルは DOM 内で上向きではなく下向きにのみ渡すことができますが、本文に適用される背景スタイルという例外があります。要素を上向きに渡すことができ、html 要素に渡すと、それに応じてキャンバスを定義できます。 3. スタッキング スタッキングのルール: 1. 重量順に並べ替えます。読者向けの重要な声明 > 著者向けの重要な声明 > 読者向けの一般的な声明 > ユーザー エージェント向けの声明。 2. 重みが同じ場合、より高い特異性を持つものが勝ちます。 3. 特徴が同じ場合は、スタイルシートの順序に従って並べ替え、後から表示されたものが優先されます。 ところで、LoVe-HA の順序がリンク スタイルの宣言に使用されるのはまさにこのルールのためです (LoVe-HA は: link; :visited; :hover;
：アクティブ）。 上記は CSS の特異性、継承、カスケードに関する内容です。その他の関連記事については、PHP 中国語 Web サイト (www.php.cn) に注目してください。