ホームページ > 記事 > ウェブフロントエンド > CSS スタイルの上書きルール

CSS スタイルの上書きルール

不言オリジナル: 2018-06-12 15:51:042510ブラウズ

次の記事では、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 は、外部スタイルシートが導入される順序 (および 2cdf5bf648cf2f33323966d7f58a7f3f 要素の順序)、および外部スタイルシートと外部スタイルシートの配置に注意を払うことを思い出させます。内部スタイルシート。一般に、内部スタイルシートはすべての外部スタイルシートの導入後、通常は 9c3bca370b5104690d9ef395f2c5f8d1 の前に表示されます。

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

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

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

CSS スタイルの上書きルール

関連記事