CSS堆叠款式表之CSS分析体制的优先选择级及款式

2021-01-20 11:55 jianzhan
款式的优先选择级
多种款式(Multiple Styles):
假如外界款式、內部款式和内联款式另外运用于同1个元素,便是使多种款式的状况。
1般状况下,优先选择级以下:
(外界款式)External style sheet <(內部款式)Internal style sheet <(内联款式)Inline style。
有个列外的状况,便是假如外界款式放在內部款式的后边,则外界款式将遮盖內部款式。
示比如下:

拷贝编码
编码以下:

<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.Class 类挑选器的权值为 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>

結果:<em> 标识内的数据信息显示信息为蓝色。

CSS 优先选择级规律
•挑选器都有1个权值,权值越大越优先选择;
•当权值相同时,后出現的款式表设定要优于先出現的款式表设定;
•原创者的标准高于访问者:即网页页面撰写者设定的CSS 款式的优先选择权高于访问器所设定的款式;
•承继的CSS 款式比不上后来特定的CSS 款式;
•在同1组特性设定中标有“!important”标准的优先选择级最大;
示比如下:

拷贝编码
编码以下:

<html>
<head>
<style type="text/css">
#redP p{
/*两个color特性在同1组*/
color:#00f !important; /* 优先选择级最大 */
color:#f00;
}
</style>
</head>
<body>
<div id="redP">
<p>color</p>
<p>color</p>
</div>
</body>
</html>

結果:在Firefox 下显示信息为蓝色;在IE 6 下显示信息为鲜红色;

应用脚本制作加上款式
当在联接外界款式后,再在其后边应用JavaScript 脚本制作插进內部款式时(即內部款式应用脚本制作建立),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") != ⑴);
var is_ie = (agent.indexOf("msie") != ⑴) && document.all && !is_op;
var is_ch = (agent.indexOf("chrome") != ⑴);
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⑴).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⑴).cssText=cssStr;

IE 访问器免费下载或3D渲染的次序将会以下
1.IE 免费下载的次序是从上到下;
2.JavaScript 涵数的实行会堵塞IE 的免费下载;
3.IE 3D渲染的次序也是从上到下;
4.IE 的免费下载和3D渲染是另外开展的;
5.在3D渲染到网页页面的某1一部分时,其上面的全部一部分都早已免费下载进行(但其实不是说全部有关联的元素都早已免费下载完。)
6.在免费下载全过程中,假如遇到某1标识是嵌入文档,而且文档是具备词义解释性的(比如:JS脚本制作,CSS款式),那末此时IE的免费下载全过程会开启独立联接开展免费下载。而且在免费下载落后行分析,假如JS、CSS中如有重界定,后边界定的涵数将遮盖前面界定的涵数。
7.分析全过程中,终止网页页面全部往下元素的免费下载。款式表文档较为独特,在其免费下载进行后,将和之前免费下载的全部款式表1起开展分析,分析进行后,将对此前全部元素(含之前早已3D渲染的)再次开展款式3D渲染。并以此方法1直3D渲染下去,直至全部网页页面3D渲染进行。
8.Firefox 解决免费下载和3D渲染的次序大致同样,只是在微小的地方一些区别,比如:iframe 的3D渲染。