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 までご連絡ください。

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7549

CakePHP チュートリアル

1382

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

HTML、CSS、およびJavaScriptの役割：コアの責任 Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

VueでBootstrapの使用方法 Apr 07, 2025 pm 11:33 PM

vue.jsでBootstrapを使用すると、5つのステップに分かれています。ブートストラップをインストールします。 main.jsにブートストラップをインポートしますブートストラップコンポーネントをテンプレートで直接使用します。オプション：カスタムスタイル。オプション：プラグインを使用します。

ブートストラップにスプリットラインを書く方法 Apr 07, 2025 pm 03:12 PM

ブートストラップスプリットラインを作成するには2つの方法があります。タグを使用して、水平方向のスプリットラインを作成します。 CSS Borderプロパティを使用して、カスタムスタイルのスプリットラインを作成します。

ブートストラップのサイズを変更する方法 Apr 07, 2025 pm 03:18 PM

Bootstrapの要素のサイズを調整するには、次のものを含むDimensionクラスを使用できます。

ブートストラップのフレームワークをセットアップする方法 Apr 07, 2025 pm 03:27 PM

Bootstrapフレームワークをセットアップするには、次の手順に従う必要があります。1。CDNを介してブートストラップファイルを参照してください。 2。独自のサーバーでファイルをダウンロードしてホストします。 3。HTMLにブートストラップファイルを含めます。 4.必要に応じてSASS/LESSをコンパイルします。 5。カスタムファイルをインポートします（オプション）。セットアップが完了したら、Bootstrapのグリッドシステム、コンポーネント、スタイルを使用して、レスポンシブWebサイトとアプリケーションを作成できます。

ブートストラップに写真を挿入する方法 Apr 07, 2025 pm 03:30 PM

ブートストラップに画像を挿入する方法はいくつかあります。HTMLIMGタグを使用して、画像を直接挿入します。ブートストラップ画像コンポーネントを使用すると、レスポンシブ画像とより多くのスタイルを提供できます。画像サイズを設定し、IMG-Fluidクラスを使用して画像を適応可能にします。 IMGボーダークラスを使用して、境界線を設定します。丸い角を設定し、IMGラウンドクラスを使用します。影を設定し、影のクラスを使用します。 CSSスタイルを使用して、画像をサイズ変更して配置します。背景画像を使用して、背景イメージCSSプロパティを使用します。

PHP OOPで、self ::、parent ::、and static ::の違いを説明します。 Apr 09, 2025 am 12:04 AM

Phpoopでは、self ::は現在のクラスを指し、親::は親クラスを指し、静的::は後期静的結合に使用されます。 1.Self ::静的方法と一定の呼び出しに使用されますが、後期静的結合をサポートしていません。 2.Parent ::サブクラスには、親クラスのメソッドを呼び出すために使用され、プライベートメソッドにアクセスできません。 3.Static ::継承と多型に適した後期静的結合をサポートしますが、コードの読みやすさに影響を与える可能性があります。