ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSスタイルの優先順位ルール
CSSスタイルの優先順位ルール
- 王林転載
- 2021-01-30 10:31:184277ブラウズ
#CSS スタイルの優先順位の概要:
外部スタイル、内部スタイル、インライン スタイルが同じ要素に同時に適用される場合、優先順位は次のようになります。 :
(外部スタイル)外部スタイル シート
例外があります。つまり、外部スタイルが内部スタイルの後に配置されます。外部スタイルは内部スタイルをオーバーライドします。
例は次のとおりです:
<head>
<style type="text/css">
/* 内部样式 */
h3{color:green;}
</style>
<!-- 外部样式 style.css -->
<link rel="stylesheet" type="text/css" href="style.css"/>
<!-- 设置：h3{color:blue;} -->
</head>
<body>
<h3>测试！</h3>
</body>セレクターの優先順位
説明:
1. インライン スタイル シート最大の重みは 1000;
2. ID セレクターの重みは 100
3. クラス セレクターの重みは 10
4. HTML タグの選択 重みセレクターの重みは 1
セレクターの重みを使用して計算と比較を行います。例は次のとおりです:
<html>
<head>
<style type="text/css">
#redP p {
/* 权值 = 100+1=101 */
color:#F00; /* 红色 */
}
#redP .red em {
/* 权值 = 100+10+1=111 */
color:#00F; /* 蓝色 */
}
#redP p span em {
/* 权值 = 100+1+1+1=103 */
color:#FF0;/*黄色*/
}
</style>
</head>
<body>
<div id="redP">
<p class="red">red
<span><em>em red</em></span>
</p>
<p>red</p>
</div>
</body>
</html>結果: タグ内のデータが青色で表示されます。
CSS 優先順位ルール:
A 各セレクターには重みがあり、重みが大きいほど優先順位が高くなります。
B 重みが等しい場合、後で表示されるスタイル シートが優先されます。設定は、最初に表示されるスタイル シート設定よりも優先される必要があります。
C 作成者のルールは、閲覧者のルールよりも優先されます。つまり、Web ページ作成者によって設定された CSS スタイルは、Web ページ作成者によって設定された CSS スタイルよりも優先されます。ブラウザ;
D 継承された CSS スタイルは、後で指定された CSS スタイルほど優れていません;
E 同じ属性設定セットで、「!重要」でマークされたルールの優先順位" が最も高く、例は次のとおりです:
(学習ビデオ共有: css ビデオ チュートリアル)
<html>
<head>
<style type="text/css">
#redP p{
/*两个color属性在同一组*/
color:#00f !important; /* 优先级最大 */
color:#f00;
}
</style>
</head>
<body>
<div id="redP">
<p>color</p>
<p>color</p>
</div>
</body>
</html>結果: Firefox では青色で表示され、赤色で表示されます。 IE 6 の場合;
スクリプトを使用してスタイルを追加する
外部スタイルが接続され、JavaScript スクリプトを使用して内部スタイルを挿入する場合 (つまり、内部スタイルはscript) を使用すると、IE ブラウザーがその独自性を発揮します。コードは次のとおりです:
<html>
<head>
<title> demo </title>
<meta name="Author" content="xugang" />
<!-- 添加外部CSS 样式 -->
<link rel="stylesheet" href="styles.css" type="text/css" />
<!-- 在外部的styles.css文件中，代码如下：
h3 {color:blue;}
-->
<!-- 使用javascript 创建内部CSS 样式 -->
<script type="text/javascript">
<!--
(function(){
var agent = window.navigator.userAgent.toLowerCase();
var is_op = (agent.indexOf("opera") != -1);
var is_ie = (agent.indexOf("msie") != -1) && document.all && !is_op;
var is_ch = (agent.indexOf("chrome") != -1);
var cssStr="h3 {color:green;}";
var s=document.createElement("style");
var head=document.getElementsByTagName("head").item(0);
var link=document.getElementsByTagName("link");
link=link.item(0);
if(is_ie)
{
if(link)
head.insertBefore(s,link);
else
head.appendChild(s);
document.styleSheets.item(document.styleSheets.length-1).cssText=cssStr;
}
else if(is_ch)
{
var t=document.createTextNode();
t.nodeValue=cssStr;
s.appendChild(t);
head.insertBefore(s,link);
}
else
{
s.innerHTML=cssStr;
head.insertBefore(s,link);
}
})();
//-->
</script>
</head>
<body>
<h3>在IE中我是绿色，非IE浏览器下我是蓝色！</h3>
</body>
</html>結果: Firefox / Chrome / Safari / Opera では、テキストが青色になります。 IE ブラウザでは、テキストは緑色になります。
追加
IE にスタイル コンテンツを追加する JavaScript コード:
var s=document.createElement("style");
var head=document.getElementsByTagName("head").item(0);
var link=document.getElementsByTagName("link").item(0);
head.insertBefore(s,link);
/* 注意：在IE 中，
虽然代码是将<style>插入在<link>之前，
但实际内存中，<style>却在<link>之后。
这也是“IE中奇怪的应用CSS的BUG”之所在！
*/
var oStyleSheet = document.styleSheets[0];
//这实际是在<link>的外部样式中追加
oStyleSheet.addRule("h3","color:green;");
alert(oStyleSheet.rules[0].style.cssText);
alert(document.styleSheets[0].rules[0].style.cssText);
//方式2
var cssStr="h3 {color:green;}";
document.styleSheets.item(document.styleSheets.length-1).cssText=cssStr;IE ブラウザーのダウンロードまたはレンダリングの順序は次のとおりです:
● IEダウンロード 順序は上から下です;
#● JavaScript 関数の実行により IE のダウンロードがブロックされます;#● IE のレンダリングの順序も上から下です;
# IE ダウンロードとレンダリングは同時に実行されます;
#● ページの特定の部分をレンダリングすると、その上のすべての部分がダウンロードされます (ただし、これは、関連するすべての要素がダウンロードされることを意味するわけではありません) )#● ダウンロード プロセス中に、特定のタグが埋め込みファイルであり、そのファイルが意味的に解釈可能である場合 (例: JS スクリプト、CSS スタイル)、IE のダウンロード プロセスでは個別のファイルが有効になります。ダウンロードに接続します。また、ダウンロード後に解析されるため、JS や CSS に再定義があった場合、後から定義した関数が先に定義した関数を上書きします。
# 解析プロセス中に、ページの下向きのすべての要素のダウンロードを停止します。スタイル シート ファイルは特別です。ダウンロードされると、以前にダウンロードされたすべてのスタイル シートとともに解析されます。解析が完了すると、以前のすべての要素 (以前にレンダリングされた要素を含む) が再レンダリングされます。ページ全体がレンダリングされるまで、この方法でレンダリングを続けます。
## ● Firefox は、iframe レンダリングなどの微妙な違いを除き、ダウンロードとレンダリングをほぼ同じ順序で処理します。 関連する推奨事項:CSS チュートリアル
以上がCSSスタイルの優先順位ルールの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。