一、css优先级 的 6大分类
通常可以将css的优先级由高到低分为6组：
- 第一优先级：无条件优先的属性只需要在属性后面使用**
！important**。它会覆盖页面内任何位置定义的元素样式。ie6不支持该属性。 - 第二优先级：在html中给元素标签加style，即内联样式。该方法会造成css难以管理，所以不推荐使用。
- 第三优先级：由一个或多个id选择器来定义。例如，
#id{margin:0;}会覆盖.classname{margin:3pxl} - 第四优先级：由一个或多个类选择器、属性选择器、伪类选择器定义。如
.classname{margin:3px}会覆盖div{margin:6px;} - 第五优先级：由一个或多个类型选择器定义。如
div{marigin:6px;}覆盖*{margin:10px；} - 第六优先级：通配选择器，如
*{marigin:6px;}
inline style（内联样式） > internal style sheet（内部样式） > external style sheet（外部样式）
！important > 内联样式 > id 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器 > 通配选择器
各项示例:
- 内联样式：写在标签属性style的样式，如
- id选择器，如
#id{…} - 类选择器，如
.class{…} - 属性选择器，如
input[type="email"]{…} - 伪类选择器，如
a:hover{…} - 伪元素选择器，如
p::before{…} - 标签选择器，如
input{…} - 通配选择器，如
*{…}
在css中，会根据选择器的特殊性来决定所定义的样式规则的次序，具有更特殊选择器的规则优先于一般选择器的规则。如果两个规则的特殊性相同，那么后定义的规则优先。
那么如何计算选择器的特殊性呢？那就要用到选择器的权重计算了。计算规则如下图：
我们把特殊性分为4个等级，每一个等级代表一类选择器，每个等级的值相加得出选择器的权重。
4个等级的定义如下：
- 第一等级：代表内联样式，如
style=""，权值为 1000 - 第二等级：代表id选择器，如
#content，权值为100 - 第三等级：代表类，伪类和属性选择器，如
.content，权值为10 - 第四等级：代表标签选择器和伪元素选择器，如
div p，权值为1
注意：通用选择器（*），子选择器（>），和相邻同胞选择器（ ）并不在这个等级中，所以他们的权值为0。
/*specificity值为0,0,0,3 特殊值等于3*/
body div p{
color: green;
}
/*specificity值为 0,1,0,1 特殊值等于101*/
div #sjweb {
font-size:12px;
}
/*specificity值为 0,0,1,6特殊值等于16*/
html > body div [id=”totals”] ul li > p {
color:red;
}
行内样式（1000）>id选择器（100）>类选择器（10）>标签选择器（1）>通用选择器（0）
-
权重值越大，优先级越高
-
选择器选择的范围越小越精确，优先级越高
#box p .tt =100 1 10
#box .tt =100 10
css简介
css（cascading style sheet，可译为“层叠样式表”或“级联样式表”）是一组格式设置规则，用于控制web页面的外观。
使用css布局的优点
1、表现和内容相分离 2、提高页面浏览速度 3、易于维护和改版 4、使用css布局更符合现在的w3c标准.
第一个特殊性的值=2*100 2*1=202
第二个特殊性的值=2*100 1=201
第三个特殊性的值=1*100 1*10 3*1=113
第四个特殊性的值=1*100 1*10 2*1=112
第五个特殊性的值=1*100 1*10 1*1=111
第六个特殊性的值=1*100 2*10 3*1=123