CSS 優先メカニズムの説明_html/css_WEB-ITnose-htmlチュートリアル-php.cn

CSS 優先メカニズムの説明_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:54:20

オリジナル

1443 人が閲覧しました

まずスタイルの優先順位について説明します。

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ブラウザのページは以下の通りです。

タグ内の内容は赤色で表示されます

タグ内の内容は黄色で表示されます

最後の

タグ内の内容は青色で表示されます

また、同じ属性設定の中で「!重要」とマークされたルールの優先度が最も高くなります。 :

<!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 ブラウザーのページに表示される結果は次のとおりです:

タグ内の内容は赤色で表示されます

その他の追加:

1. セレクターの重みが大きいほど、優先度が高くなります。

2. 重みが等しい場合、最初に表示されるスタイルシート設定よりも高くなります。より高い優先度

3. 継承された CSS スタイルは、後で指定された CSS スタイルよりも低い優先度を持ちます

4. 子孫セレクターとグループセレクターは、タグ名セレクター、クラスセレクター、およびセレクターの拡張アプリケーションと同じです。ここでは紹介しません。

まずスタイルの優先順位について説明します。

1. 外部スタイルシート

例:

rree

2. 内部スタイルシート : 例:

3. インラインスタイルは可能な限り使用しないことをお勧めします。これは、より直感的ではありますが、構造と性能の分離という設計思想に準拠していないためです。

一般的に、上記 3 つのスタイルの優先順位は次のとおりです:

インラインスタイル > 内部スタイル > 外部スタイル

セレクターの優先順位:

セレクターの種類は 3 つのタイプに分類できます。

1. h1{} などのタグ名セレクター。

2. .test{} などのクラスセレクター。

3.#test{} などの ID セレクター。

同時に、インラインスタイルシート、つまりタグ内にを記述することも考慮する必要があります。

各セレクターの重みは次のとおりです:

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 ブラウザーのページは次のとおりです:

タグ内のコンテンツは赤色で表示されます

タグ内のコンテンツは赤色で表示されます黄色

最後の

タグ内のコンテンツは青色で表示されます

另外在同一组属性设置中标有“!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浏览器页面显示结果如下：

标签里的内容显示为红色

其他补充：

1.选择器的权值越大优先级越高；

2.当权值相等时，后出现的样式表设置比先出现的样式表设置优先级高；

3.继承的CSS 样式优先级低于后来指定的CSS 样式

4.后代选择器和群组选择器是对标签名选择器、类选择器和ID选择器的扩展应用，在此就不介绍了。