Home > Article > Web Front-end > css style priority rule
css style priority rule
- 王林forward
- 2021-01-30 10:31:184175browse
#Introduction to css style priority:
When external styles, internal styles and inline styles are applied to the same element at the same time, the priorities are as follows:
(External style)External style sheet
There is an exception, that is, if the external style is placed after the internal style, The outer style will override the inner style.
Examples are as follows:
<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>Priority of selector
Explanation:
1. Inline style sheet The maximum weight is 1000;
2. The weight of the ID selector is 100
3. The weight of the Class selector is 10
4. HTML tag selection The weight of the selector is 1
Use the weight of the selector for calculation and comparison. The example is as follows:
<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>Result: The data in the tag is displayed in blue.
CSS Priority Rule:
A Each selector has a weight, the greater the weight, the priority;
B When the weights are equal, the style sheet that appears later Settings should take precedence over the style sheet settings that appear first;
C The creator’s rules are higher than those of the viewer: that is, the CSS style set by the web page writer has priority over the style set by the browser;
D The inherited CSS style is not as good as the CSS style specified later;
E In the same set of attribute settings, the priority of the rules marked with "!important" is the highest; the example is as follows:
(Learn Video sharing: css video tutorial)
<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>Result: Displayed in blue under Firefox; Displayed in red under IE 6;
Use script to add styles
When the external style is connected and then a JavaScript script is used to insert the internal style (that is, the internal style is created using a script), the IE browser shows its uniqueness. The code is as follows:
<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>Result: In Firefox / Chrome / Safari / Opera, the text is blue. In the IE browser, the text is green.
Additional
JavaScript code to add style content in IE:
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;The order of IE browser downloading or rendering may be as follows:
● IE download The order is from top to bottom;
● The execution of JavaScript function will block the download of IE;
● The order of IE rendering is also from top to bottom;
● IE The downloading and rendering are performed at the same time;
● When rendering to a certain part of the page, all parts above it have been downloaded (but this does not mean that all associated elements have been downloaded.)
● During the download process, if a certain tag is an embedded file and the file is semantically interpretable (for example: JS script, CSS style), then the IE download process will enable separate Connect to download. And it will be parsed after downloading. If there is any redefinition in JS or CSS, the functions defined later will overwrite the functions defined earlier.
● During the parsing process, stop downloading all downward elements of the page. The style sheet file is special. After it is downloaded, it will be parsed together with all previously downloaded style sheets. After the parsing is completed, all previous elements (including those that have been rendered before) will be re-rendered. And continue rendering in this way until the entire page is rendered.
● Firefox processes downloading and rendering in roughly the same order, except for some subtle differences, such as iframe rendering.
Related recommendations: CSS tutorial
The above is the detailed content of css style priority rule. For more information, please follow other related articles on the PHP Chinese website!