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

ホームページ

ウェブフロントエンド

CSSチュートリアル

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

黄舟

Dec 17, 2016 pm 01:29 PM

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) に注目してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

「CSS4」アップデートApr 11, 2025 pm 12:05 PM

私が最初にCSS4¹のことを鳴らしたので、それについてもっと多くの議論がありました。私はここで他の人から私のお気に入りの考えをまとめようとしています。がある

3種類のコードApr 11, 2025 pm 12:02 PM

新しいプロジェクトを開始するたびに、3つのタイプ、または必要に応じてカテゴリを検討しているコードを整理します。そして、これらのタイプは適用できると思います

HTTPSは簡単です！Apr 11, 2025 am 11:51 AM

私は、httpsの複雑さを公に嘆きながら罪を犯しました。過去に、私はサードパーティのベンダーからSSL証明書を購入し、問題がありました

HTMLデータ属性ガイドApr 11, 2025 am 11:50 AM

HTML、CSS、およびJavaScriptのデータ属性について知りたいと思っていたことはすべて。

JavaScriptの不変性を理解するApr 11, 2025 am 11:47 AM

JavaScriptの不変性を以前に作業したことがない場合は、変数を新しい値または再割り当てに割り当てることと混同しやすいことがわかります。

最近、カスタムチェックボックス、ラジオボタン、トグルスイッチを構築することは完全に可能です。必要でさえありません

脚注文字Apr 11, 2025 am 11:34 AM

脚注に最適な特別なスーパーセット番号の文字があります。ここにあります：

HTML、CSS、JavaScriptを使用してアニメーションカウントダウンタイマーを作成する方法Apr 11, 2025 am 11:29 AM

プロジェクトにカウントダウンタイマーが必要だったことはありますか？そのようなことのために、プラグインに手を伸ばすのは自然なことかもしれませんが、実際にはもっとたくさんあります

See all articles

ホットAIツール

ホットツール

SecLists は、セキュリティテスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティテスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティテストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジングペイロード、機密データパターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテストマシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。