首页 > 代码库 > 浅谈CSS优先级机制（一）

浅谈CSS优先级机制（一）

2024-09-06 13:32:14   215人阅读

初次写随笔，如果有哪个地方不足还望大神指点改正，下面我来谈谈我对于CSS优先级的了解吧。

CSS优先级，通俗的理解就是你给元素等一堆属性描述，然后最后到底是哪个描述作为最终显示的效果的规则或机制（个人理解）。以下我将分为几个点来谈谈优先级的确定。

1.引入方式：

CSS引入的方式，我目前只知道四种：内联式、内嵌式、导入式、链接式（当然网上的说法名称不一，理解就好）。

各种引入方式的用法我在这里就不再多说了。以上我所按顺序罗列的四个方式是理论上的优先级顺序，也就是说，我使用内联式引入的css代码作用优先级大于内联式，其次是导入式，再次是链接式，简单记：内联式>内嵌式>导入式>链接式。但实际上可就不一样了，比如下列代码：

link标签在style标签前：

1 <link rel="stylesheet" href="Untitled-1.css" type="text/css"/>
2 <style type="text/css">
3 #p1{
4     color:#6C6;}
5 </style>

Untitled-1.css的代码为：

 1 #p1{  color:#F0C;  } 

结果，style标签的css代码胜出了，取得了优先级。

如果，你将link标签和style标签的顺序调换一下，你猜到底是哪个取得优先级呢？

答案是link标签引入的CSS文档胜出了。（以上你将style标签里的代码换成@import(导入式)也是如上情况）。

加入你再使用如下代码：

1 <p id="p1" style="color=#fff">这里测试一下CSS的优先级</p>

结果，p标签里的style的描述胜出了（内联式）。

由此我总结一下根据引入方式判断优先级的方法：针对某一对象，看看描述该对象的css代码是否最接近，最靠近于它（就近原则），最接近于它的优先级最高（内联式是在引入方式最高的），内嵌式、导入式、链接式还要看情况判断。

2.特殊性：

谈到特殊性就必须和选择器挂钩。说简单点，就是我要看看到底哪个选择器更为特殊咯。选择器可以划分为四种：

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优先级（二）。

以上内容有什么缺漏之处还望大神指点改正，留下您的评论，谢谢！

 

浅谈CSS优先级机制（一）


联系
我们