ホームページ ウェブフロントエンド CSSチュートリアル CSS スタイルの上書きルールの詳細な紹介

CSS スタイルの上書きルールの詳細な紹介

Mar 04, 2017 am 10:22 AM
css スタイル カバー

CSSの正式名称が「Cascading Style Sheets」であることは誰もが知っていますが、「カスケード」という言葉の意味を知らない人も多いと推測されます。実際、「カスケード」とは、要素に複数のスタイルが適用され、同じ名前のスタイル属性が存在する場合、ブラウザはそれらから属性値を選択する必要があります。このプロセスは「カスケード」と呼ばれます。スタイル オーバーレイ (この名前の方が一般的です) は特定のルールに従います。私は以前からこのルールを漠然と理解していましたが、最近になって「CSS: The Missing Manual」を読んで初めて明確になりました。以下は私の勉強メモの一部です。

まず、多くの状況で要素に複数のスタイルが適用されることを明確にする必要があります。スタイルの適用範囲のルールも、さまざまな状況に応じて決定する必要があります。具体的なルールは次のとおりです。

ルール 1: 継承によりスタイルの競合が発生した場合、最も近い祖先が優先されます。

CSS の継承メカニズムにより、要素はそれを含む祖先要素からスタイルを継承できます。次の状況を考えてみましょう:

<html>
<head>
<title>rule 1</title>
<style>
body {color:black;}   
p {color:blue;}   
</style>
</head>
<body>
    <p>welcome to <strong>gaodayue的网络日志</strong></p>
</body>
</html>
ログイン後にコピー


strong はそれぞれ body と p から color 属性を継承しますが、p は継承ツリー上にあるためです。はstrongに近いため、strongのテキストはpの青色を継承することになります。

ルール 2: 継承されたスタイルが直接指定されたスタイルと競合する場合、直接指定されたスタイルが優先されます。

上記の例で、

strong {color:red;}
ログイン後にコピー


のように、strong 要素のスタイルも指定されている場合、ルール 2 に従って、strong のテキストは最終的に赤色で表示されます。

ルール 3: 直接指定されたスタイルが競合する場合、スタイルの重みが大きい方が優先されます。

スタイルの重みはスタイルセレクターによって異なります。重みは次の表で定義されます。

CSSセレクターの重み

タグセレクター 1
クラスセレクター 10
IDセレクター 100
インラインスタイル 1000
疑似要素 (:first-child など) 1
疑似クラス (:link など) 10

インライン スタイル > ID セレクター > クラス セレクター > タグ セレクターの重みに加え、子孫セレクターの重みは各項目の重みの合計であることがわかります。 「#nav .current a」の重みは 100 + 10 + 1 = 111 です。

ルール 4: スタイルの重みが同じ場合、後者が勝ちます。

次の状況を考えてみましょう

<p

class="byline">Written   
 by <a

class="email"

href="mailto:jean@cosmofarmer.   
 com">Jean   
 Graine de Pomme</a></p>
12 .byline   
 a {color:red;}p   
 .email {color:blue;}
ログイン後にコピー


".byline a" と "p .email" はどちらも上記の a 要素を直接指定しており、重みは 11 です。ルール 4 に従って、最終的な表示は青色になります。

スタイル シートは外部にも内部にもできるため、ルール 4 は、外部スタイル シートが導入される順序 (および 要素の順序)、および外部スタイル シートと外部スタイル シートの配置に注意を払うことを思い出させます。内部スタイルシート。一般に、内部スタイル シートはすべての外部スタイル シートの導入後、通常は の前に表示されます。

ルール 5: !重要なスタイル属性はオーバーライドされません。

! important は、どうしても必要な場合に上記の 4 つのルールを破る「黄金の指」と見なすことができます。特定のスタイル属性を使用し、それがオーバーライドされないようにする必要がある場合は、属性値の後に ! important を追加できます。ルール 4 の例を例に挙げると、「.byline a {color:red ! important;}」を強制できます。リンクが赤く表示されます。ほとんどの場合、スタイルのオーバーライドは他の方法で制御でき、! important を悪用することはできません。

上記の CSS スタイル カバレッジ ルールの包括的な理解は、編集者によって共有されたすべての内容です。参考になれば幸いです。また、PHP 中国語 Web サイトをサポートしていただければ幸いです。

CSS スタイルのオーバーライド ルールの詳細と関連記事については、PHP 中国語 Web サイトに注目してください。

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

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Vue におけるプレースホルダーの意味 Vue におけるプレースホルダーの意味 May 07, 2024 am 09:57 AM

Vue.js では、placeholder 属性は、input 要素のプレースホルダー テキストを指定します。これは、ユーザーがコンテンツを入力していないときに表示され、入力のヒントや例を提供し、フォームのアクセシビリティを向上させます。その使用方法は、input 要素にプレースホルダー属性を設定し、CSS を使用して外観をカスタマイズすることです。ベスト プラクティスには、入力に関連すること、短く明確にすること、デフォルトのテキストを避けること、アクセシビリティを考慮することが含まれます。

jsでのスパンの意味は何ですか jsでのスパンの意味は何ですか May 06, 2024 am 11:42 AM

スパン タグは、テキストにスタイル、属性、または動作を追加できます。 色やフォント サイズなどのスタイルを追加するために使用されます。 idやclassなどの属性を設定します。クリック、ホバーなどの関連する動作。さらに処理または引用するためにテキストにマークを付けます。

jsでレムは何を意味しますか jsでレムは何を意味しますか May 06, 2024 am 11:30 AM

CSS の REM は、ルート要素 (html) のフォント サイズに対する相対単位です。次の特性があります: ルート要素のフォント サイズに相対し、親要素の影響を受けません。ルート要素のフォント サイズが変更されると、REM を使用する要素もそれに応じて調整されます。任意の CSS プロパティとともに使用できます。 REM を使用する利点は次のとおりです。 応答性: さまざまなデバイスや画面サイズでもテキストを読みやすい状態に保ちます。一貫性: Web サイト全体でフォント サイズが一貫していることを確認します。スケーラビリティ: ルート要素のフォント サイズを調整することで、グローバル フォント サイズを簡単に変更できます。

vueに画像を導入する方法 vueに画像を導入する方法 May 02, 2024 pm 10:48 PM

Vue に画像を導入するには、URL、require 関数、静的ファイル、v-bind ディレクティブ、CSS 背景画像の 5 つの方法があります。動的画像は Vue の計算プロパティまたはリスナーで処理でき、バンドルされたツールを使用して画像の読み込みを最適化できます。パスが正しいことを確認してください。そうでないと、読み込みエラーが表示されます。

プロンプトをjsでラップする方法 プロンプトをjsでラップする方法 May 01, 2024 am 06:24 AM

JavaScript でプロンプト() メソッドを使用する場合、次の 3 つの方法で改行を実現できます。 1. 改行する位置に「\n」文字を挿入します。 2. 行に改行文字を使用します。プロンプトテキスト; 3. CSS の "white" -space: pre" スタイルを使用して改行を強制します。

jsのノードとは何ですか jsのノードとは何ですか May 07, 2024 pm 09:06 PM

ノードは、HTML 要素を表す JavaScript DOM 内のエンティティです。これらはページ内の特定の要素を表し、その要素にアクセスして操作するために使用できます。一般的なノード タイプには、要素ノード、テキスト ノード、コメント ノード、ドキュメント ノードなどがあります。 getElementById() などの DOM メソッドを通じて、ノードにアクセスし、プロパティの変更、子ノードの追加/削除、ノードの挿入/置換、ノードのクローン作成などの操作を行うことができます。ノードトラバーサルは、DOM 構造内を移動するのに役立ちます。ノードは、ページ コンテンツ、イベント処理、アニメーション、およびデータ バインディングを動的に作成するのに役立ちます。

ブラウザのプラグインは何語で書かれていますか? ブラウザのプラグインは何語で書かれていますか? May 08, 2024 pm 09:36 PM

ブラウザ プラグインは通常、次の言語で作成されます。 フロントエンド言語: JavaScript、HTML、CSS バックエンド言語: C++、Rust、WebAssembly その他の言語: Python、Java

vscodeで不明な属性を設定する方法 vscodeで不明な属性を設定する方法 vscodeで不明な属性を設定する方法 vscodeで不明な属性を設定する方法 May 09, 2024 pm 02:43 PM

1. まず、左下隅にある設定アイコンを開き、設定オプションをクリックします。 2. 次に、ジャンプしたウィンドウで CSS 列を見つけます。 3. 最後に、不明なプロパティ メニューのドロップダウン オプションをエラー ボタンに変更します。 。

See all articles