ホームページ >ウェブフロントエンド >htmlチュートリアル >CSS 優先メカニズムの説明_html/css_WEB-ITnose
CSS 優先メカニズムの説明_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:54:201427ブラウズ
まずスタイルの優先順位について説明します。
1. 外部スタイル シート
例:
<!-- 外部样式 bootstrap.min.css --> <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
例:
リーリー
3. インライン スタイル (インライン スタイル)
例:
<head> <style type="text/css"> /*内部样式*/ h1 {color:blue;} </style> </head> インライン スタイルは、特定のタグのスタイルをより柔軟に変更できますが、それでもインライン スタイルを使用しないことをお勧めします。 。これは、より直感的ではありますが、構造と性能の分離という設計思想に準拠していないためです。
一般的に、上記 3 つのスタイルの優先順位は次のとおりです:
インライン スタイル > 内部スタイル > 外部スタイル
セレクターの優先順位:
セレクターの種類は 3 つのタイプに分類できます。
1. h1{} などのタグ名セレクター。2. .test{} などのクラス セレクター。
3.#test{} などの ID セレクター。
同時に、インラインスタイルシート、つまりタグ内にを記述することも考慮する必要があります。
ここでは、上記 3 つのセレクターとインライン スタイル シートの重みを表すために 1000、100、10、1 の数値を使用します。数値が大きいほど重みが大きくなり、優先度が高くなります。
各セレクターの重みは次のとおりです:
1. インライン スタイル シートの重みは 1000 に設定され、2 番目に設定されます。クラス クラス セレクター HTML タグ セレクターの重みは 3 番目で、10 に設定されます
4。HTML タグ セレクターの重みは最も低く、1 に設定されます
例:
<h1 style="color:blue">样式测试</h1>
Firefox、IE10、Chromeブラウザのページは以下の通りです。
6f23bfb838f442699a99d538155cf763タグ内の内容は赤色で表示されます
45a2772a6b6107b401db3c9b82c049c2タグ内の内容は黄色で表示されます最後のe388a4556c0f65e1904146cc1a846beeタグ内の内容は青色で表示されます
また、同じ属性設定の中で「!重要」とマークされたルールの優先度が最も高くなります。 :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> /* 内部样式 */ #blueP p { /* 权值 = 100+1=101 */ color:blue; } #blueP .red { /* 权值 = 100+10=110 */ color:red; } #blueP p span { /* 权值 = 100+1+1=102 */ color:yellow; } #blueP span { /* 权值= 100+1=101 */ color:black; } </style> </head> <body> <div id="blueP"> <p class="red">优先级测试 <span>优先级测试</span> </p> <p>优先级测试</p> </div> </body> </html>
Firefox、IE10、および Chrome ブラウザーのページに表示される結果は次のとおりです:
e388a4556c0f65e1904146cc1a846bee タグ内の内容は赤色で表示されます
その他の追加:1. セレクターの重みが大きいほど、優先度が高くなります。
2. 重みが等しい場合、最初に表示されるスタイル シート設定よりも高くなります。より高い優先度
3. 継承された CSS スタイルは、後で指定された CSS スタイルよりも低い優先度を持ちます
4. 子孫セレクターとグループ セレクターは、タグ名セレクター、クラス セレクター、およびセレクターの拡張アプリケーションと同じです。ここでは紹介しません。
まずスタイルの優先順位について説明します。
1. 外部スタイル シート
例:rree
2. 内部スタイル シート : 例:
3. インライン スタイルは可能な限り使用しないことをお勧めします。これは、より直感的ではありますが、構造と性能の分離という設計思想に準拠していないためです。
一般的に、上記 3 つのスタイルの優先順位は次のとおりです:
インライン スタイル > 内部スタイル > 外部スタイル
セレクターの優先順位:
セレクターの種類は 3 つのタイプに分類できます。1. h1{} などのタグ名セレクター。
2. .test{} などのクラス セレクター。
3.#test{} などの ID セレクター。
同時に、インラインスタイルシート、つまりタグ内にを記述することも考慮する必要があります。
ここでは、上記 3 つのセレクターとインライン スタイル シートの重みを表すために 1000、100、10、1 の数値を使用します。数値が大きいほど重みが大きくなり、優先度が高くなります。
各セレクターの重みは次のとおりです:
1. インライン スタイル シートの重みは 1000 に設定され、2 番目に設定されます。クラス クラス セレクター HTML タグ セレクターの重みは 3 番目で、10 に設定されます4。HTML タグ セレクターの重みは最も低く、1 に設定されます
例:
<head> <style type="text/css"> /*内部样式 */ #redp p { color:red !important; /* 优先级最大*/ color:blue; } </style> </head> <body> <div id="redp"> <p>!important测试</p> </div> </body> </html>
Firefox、IE10、および Chrome ブラウザーのページは次のとおりです:
6f23bfb838f442699a99d538155cf763タグ内のコンテンツは赤色で表示されます
45a2772a6b6107b401db3c9b82c049c2タグ内のコンテンツは赤色で表示されます黄色
最後の e388a4556c0f65e1904146cc1a846bee タグ内のコンテンツは青色で表示されます
另外在同一组属性设置中标有“!important”规则的优先级最大，示例如下：
<head> <style type="text/css"> /*内部样式 */ #redp p { color:red !important; /* 优先级最大*/ color:blue; } </style> </head> <body> <div id="redp"> <p>!important测试</p> </div> </body> </html>
在火狐，IE10，Chrome浏览器页面显示结果如下：
e388a4556c0f65e1904146cc1a846bee标签里的内容显示为红色
其他补充：
1.选择器的权值越大优先级越高；
2.当权值相等时，后出现的样式表设置比先出现的样式表设置优先级高；
3.继承的CSS 样式优先级低于后来指定的CSS 样式
4.后代选择器和群组选择器是对标签名选择器、类选择器和ID选择器的扩展应用，在此就不介绍了。