ホームページ > 記事 > ウェブフロントエンド > CSS スタイルの上書きルールの詳細な紹介
CSS スタイルの上書きルールの詳細な紹介
- 高洛峰オリジナル
- 2017-03-04 10:22:481218ブラウズ
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 サイトに注目してください。