WebCSSの優先度

高洛峰
高洛峰オリジナル
2016-11-24 11:39:061894ブラウズ

複数の CSS スタイル ファイルが Web ページに読み込まれます。そのうちの 1 つは Ext ライブラリに付属するスタイル ファイルで、すべてのタグのいくつかのスタイルを定義しているため、元の Web ページが正しく表示されません。対応するスタイルを見つけると、正しいスタイルがリセットされます。新しいスタイルを body タグに追加しますが、2 つのスタイルが表示され、Ext スタイルはまだ有効です。新しいスタイルを設定するときに * を追加しなかったことに最終的に気づきましたが、これは body タグにのみ役に立ち、サブタグには役に立ちませんでした。以下は変更されたスタイルです

[css]  
.diy,  
.diy *{  
    box-sizing: content-box;  
    -moz-box-sizing : content-box;  
    -webkit-box-sizing: content-box;  
}

ラベルが複数のスタイルで定義されており、スタイル間で競合がある場合、優先順位は「ID に対して定義されたスタイル」>「クラスで定義されたスタイル」>「ラベルの種類」です。定義されたスタイル」。たとえば、次のスタイル

[css] 
div{  
    border:2px solid #0000FF;   
}  
  
  
.powerHeader{  
    border:2px solid #00ff00;   
}  
  
  
#navigation{  
    border:2px solid #ff0000;   
}

はタグ 6ecf4da4ff7c58a308727a236954db49 内にあり、最初のスタイルは #navigation です。#navigation が存在しない場合、.powerHeader スタイルは次のようになります。適用され、最後に div スタイルが適用されます。

同時に、リンクまたはスタイルのみで定義された複数のタグクラス間に競合がある場合、最後に定義されたクラスが適用されます。

CSS スタイルの優先順位を理解すると、Web 開発における多くのスタイル競合の問題を回避できます。


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