标签：特殊性 htm 样式 doctype body 优先级 color 指点 答案
初次写随笔，如果有哪个地方不足还望大神指点改正，下面我来谈谈我对于CSS优先级的了解吧。
CSS优先级，通俗的理解就是你给元素等一堆属性描述，然后最后到底是哪个描述作为最终显示的效果的规则或机制（个人理解）。以下我将分为几个点来谈谈优先级的确定。
CSS引入的方式，我目前只知道四种：内联式、内嵌式、导入式、链接式（当然网上的说法名称不一，理解就好）。
各种引入方式的用法我在这里就不再多说了。以上我所按顺序罗列的四个方式是理论上的优先级顺序，也就是说，我使用内联式引入的css代码作用优先级大于内联式，其次是导入式，再次是链接式，简单记：内联式>内嵌式>导入式>链接式。但实际上可就不一样了，比如下列代码：
1 <link rel="stylesheet" href="Untitled-1.css" type="text/css"/> 2 <style type="text/css"> 3 #p1{ 4 color:#6C6;} 5 </style>
1 #p1{ color:#F0C; }
结果，style标签的css代码胜出了，取得了优先级。
如果，你将link标签和style标签的顺序调换一下，你猜到底是哪个取得优先级呢？
答案是link标签引入的CSS文档胜出了。（以上你将style标签里的代码换成@import(导入式)也是如上情况）。
加入你再使用如下代码：
1 <p id="p1" style="color=#fff">这里测试一下CSS的优先级</p>
结果，p标签里的style的描述胜出了（内联式）。
由此我总结一下根据引入方式判断优先级的方法：针对某一对象，看看描述该对象的css代码是否最接近，最靠近于它（就近原则），最接近于它的优先级最高（内联式是在引入方式最高的），内嵌式、导入式、链接式还要看情况判断。
谈到特殊性就必须和选择器挂钩。说简单点，就是我要看看到底哪个选择器更为特殊咯。选择器可以划分为四种：
1.ID选择器；
2.类、伪类、属性及属性值选择器；
3.元素、伪元素选择器；
4.通配选择器。
让我们来瞧瞧上面哪种更为特殊。首先通配选择器针对的是全体对象，没有什么特殊，很一般；元素、伪元素选择器则是针对某些元素而言，其特殊程度高于通配；再看看类、伪类、属性及属性值选择器，就是对某些元素某种状态下的选择，比元素、伪元素选择器特殊点；最后是ID咯，就像一个人的身份证号码，特指一个，最为特殊。根据我以上的描述，我来给各种选择器按特殊程度排下序：ID选择器>类、伪类、属性及属性值选择器>元素、伪元素选择器>通配选择器。特殊性更强的就可以取得优先。
例如下列代码：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <style type="text/css"> 6 #p1{ 7 color:#f00; 8 } 9 p[id="p1"]{ 10 color:#ff0; 11 } 12 p{ 13 color:#6C6; 14 } 15 *{ 16 color:#00f; 17 } 18 </style> 19 <title>无标题文档</title> 20 </head> 21 <body> 22 <p id="p1">这里我要测试一下样式的优先级</p> 23 </body> 24 </html>
结果，p标签里的文字会显示为红色（即使属性值选择器中的属性是id，也是按照以上顺序）。
怎么？很简单？我来一道更为复杂点的，看下列代码：
1 <html> 2 <head> 3 <style type="text/css"> 4 #P1 p { 5 color:#F00; /* 红色 */ 6 } 7 8 #P1 .red em { 9 color:#00F; /* 蓝色 */ 10 11 } 12 13 #P1 p span em { 14 color:#FF0;/*黄色*/ 15 } 16 </style> 17 </head> 18 <body> 19 <div id="P1"> 20 <p class="red">red 21 <span><em>em red</em></span> 22 </p> 23 <p>red</p> 24 </div> 25 </body> 26 </html>
来猜猜em标签里面的p标签的文字是什么颜色的？
嘿嘿，答案是蓝色！那为什么会这样呢？
其实，以上四种选择器是有权重之分的，我们可以使用权重值描述他们的权重，具体如下：
1.ID选择器：0，1，0，0；
2.类、伪类、属性及属性值选择器：0，0，1，0；
3.元素、伪元素选择器：0，0，0，1；
4.通配选择器：0，0，0，0。
来，我们来分析一下以上代码，#P1 p{color:#f00;}它的权重值这样计算：0，1，0，0+0，0，0，1=0，1，0，1；
#P1 .red em{color:#00f;}它的权重值：0，1，0，0+0，0，1，0+0，0，0，1=0，1，1，1；
#P1 p span em{color:#ff0;}它的权重值：0，1，0，0+0，0，0，1+0，0，0，1+0，0，0，1=0，1，0，3；
所以，#P1 .red em{color:#00f;}胜出，最后显示结果为蓝色。
再补充一下：如果权重值为0，1，0，0和权重值为0，0，1，7的到底哪个优先呢？答案是0100。其中的规则就是：看最高位（左边），最高位相同再往下一位看。
好，那暂时先讲到这，很累想休息一下，更多内容补充请继续看我下一篇文章：浅谈CSS优先级（二）。
以上内容有什么缺漏之处还望大神指点改正，留下您的评论，谢谢！
标签：特殊性 htm 样式 doctype body 优先级 color 指点 答案
原文地址：http://www.cnblogs.com/liaozejie/p/6486574.html
