css-样式优先级算法

1.多重样式优先级

多重样式（Multiple Styles）：

如果外部样式、内部样式和内联样式同时应用于同一个元素，就是使多重样式的情况。

一般情况下，优先级如下：

（外部样式）External style sheet <（内部样式）Internal style sheet <（内联样式）Inline style

有个例外的情况，就是如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。

   <style type="text/css">
     /* 内部样式 */
     h3{color:green;}
   </style>

    <!-- 外部样式 style.css -->
   <link rel="stylesheet" type="text/css" href="style.css"/>

2.CSS样式优先级算法如何计算？

1. 内联样式表的权值最高 1000；
2. ID 选择器的权值为 100
3. Class 类选择器的权值为 10
4. HTML 标签选择器的权值为 1

1.css优先级

是由四个级别和各个级别出现的次数决定的，值从左到右，左面的最大，一级大于一级

2.优先级算法

每个规则对应一个初始四位数：0,0,0,0

若是行内样式优先级，则是1,0,0,0，高于外部定义

<div style=”color: red”>sjweb</div>

若是ID选择符，则分别加0,1,0,0

若是类选择符，属性选择符，伪类选择符，则分别加0,0,1,0

若是元素选择器，伪类选择器，则分别加0,0,0,1

3.需要注意

!important的优先级是最高的，但出现冲突时则需比较”四位数“

优先级相同时，则采用就近原则

继承得来的属性，其优先级最低

4.实例

body div p{color: green;}--Specificity值为0,0,0,3
Div # sjweb { font-size:12px;}--Specificity值为 0,1,0,1
html > body div [id=”totals”] ul li > p {color:red;}--Specificity值为 0,0,1,6