CSS スタイルの上書きルールの詳細な紹介-CSSチュートリアル-php.cn

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

高洛峰

リリース： 2017-03-04 10:22:48

オリジナル

1295 人が閲覧しました

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