ホームページ > 記事 > ウェブフロントエンド > CSS スタイルのオーバーライド order_html/css_WEB-ITnose
CSS スタイルのオーバーライド order_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:25:461119ブラウズ
0. スタイルの位置分類
1) 外部 CSS ファイルを使用する
<link href="/static/css/main.css" rel="stylesheet">
2) head で style 要素を使用する
<head><style type="text/css"> .main{color:red;}</style></head> 3)要素
<body style="color:red;"></body>
1. スタイル カバレッジの一般原則:
要素のスタイル > ファイル ヘッダーのスタイル要素 > 外部スタイル ファイル
異なるレベルのスタイルが同じ要素をレンダリングする場合、競合するスタイルが優先されます。要素の style を指定すると、ファイル ヘッダーの style 要素が上書きされます。競合しないスタイルの場合は、スタイルが上書きされます。
例:
<head><style type="text/css"> .main{color:red;background-color:yellow;}</style></head><body id="mainbody" class="main" style="color:green;"></body>
body要素の場合、要素のスタイルとファイルヘッダーのスタイルの両方がヒットします。色のスタイルが競合する場合は、背景色のスタイルが重ねられます。の場合、body 要素のスタイルが最初に使用されます。レンダリング結果は次のようになります:
color:green;background-color:yellow;
2. 同じレベルのスタイル ファイルの下で:
1) スタイル シートの要素セレクターの選択が正確であればあるほど、スタイルの優先順位が高くなります:
指定されたスタイルID セレクターで指定されたスタイル > 要素タイプ セレクターで指定されたスタイル
例では、#mainbody > body
2) 同じタイプで指定されたスタイルselector の、スタイル シート ファイル内では、ファイル内で後ほど優先度が高くなります。
ここでは、要素クラスが出現する順序ではなく、スタイル シート ファイル内で後ほど、優先度が高くなります。
たとえば、スタイルシートでは .class2 が .class1 の後に表示されます。
.class1{ color:red;}.class2{ color:green;}
for
<div class="class2 class1"><div class="class1 class2">
要素内で class1 が指定されている場合、style Inテーブルファイル, この時点では、class1 は class2 よりも優先されます。 Color:green が使用されます
3) 特定のスタイルの優先順位を高くしたい場合は、! important
を使用できます。
<head><style type="text/css"> .main{color:red !important; background-color:yellow;}</style></head><body id="mainbody" class="main" style="color:green;"></body>
頭のスタイルに! important を使用しているので、レンダリング時に color:red が使用されます
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。