css权重和优先级

选择器权重

样式类型

样式类型分为三类
1、行间

我的行间CSS样式。

2、内联

3、外部

选择器类型

• 1、ID　　#id
• 2、class　　.class
• 3、标签　　p
• 4、通用　　*
• 5、属性　　[type="text"]
• 6、伪类　　:hover
• 7、伪元素　　::first-line
• 8、子选择器、相邻选择器

权重计算规则

第一等：代表内联样式，如: style=””，权值为1000。
第二等：代表ID选择器，如：#content，权值为0100。
第三等：代表类，伪类和属性选择器，如.content，权值为0010。
第四等：代表类型选择器和伪元素选择器，如div p，权值为0001。
通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。
继承的样式没有权值。

比较规则

遵循如下法则：

• 选择器都有一个权值，权值越大越优先；
• 当权值相等时，后出现的样式表设置要优于先出现的样式表设置；
• 创作者的规则高于浏览者：即网页编写者设置的 CSS 样式的优先权高于浏览器所设置的样式；
• 继承的 CSS 样式不如后来指定的 CSS 样式；
• 在同一组属性设置中标有!important规则的优先级最大
• 通配符、子选择器、相邻选择器等的。虽然权值为0000，但是也比继承的样式优先。

！important

1. !important 的作用是提升优先级，换句话说。加了这句的样式的优先级是最高的（比内联样式的优先级还高)。

我显示红色

2. ie7+和别的浏览器对important的这种作用的支持度都很好。只有ie6有些bug

p{
      color:red !important;
      color:blue;    
 }//会显示blue

但是这并不说明ie6不支持important，只是支持上有些bug。看下面

p{
     color:red !important;  
}
p{
    color:blue;  
} //这样就会显示的是red。说明ie6还是支持important的。

我们再来看一个具体的例子：假如有以下组样式规则，你能判断出HTML代码中的两个标题是什么颜色吗？

#content div#main-content h2{
    color:red;
}
 
#content #main-content>h2{
    color:blue
}
body #content div[id="main-content"] h2{
    color:green;
}
 
#main-content div.paragraph h2{
    color:orange;
}
#main-content [class="paragraph"] h2{
    color:yellow;
}
div#main-content div.paragraph h2.first{
    color:pink;
}

以下是HTML代码：

    

        
CSS简介
        
CSS（Cascading Style Sheet，可译为“层叠样式表”或“级联样式表”）是一组格式设置规则，用于控制Web页面的外观。
        

            
使用CSS布局的优点
            
1、表现和内容相分离 2、提高页面浏览速度 3、易于维护和改版 4、使用CSS布局更符合现在的W3C标准.
        
    

判断出来了么？答案是：两个标题都是红色的！

让我们来一起算算六个样式规则各自的特殊性的值：

第一个特殊性的值=2100+21=202
第二个特殊性的值=2100+1=201
第三个特殊性的值=1100+110+31=113
第四个特殊性的值=1100+110+21=112
第五个特殊性的值=1100+110+11=111
第六个特殊性的值=1100+210+3*1=123

第一个样式规则以其202的高分一举夺得了本次样式选择器特殊性大赛的冠军，后面一些规则虽然看起来好像更复杂，但特殊性并不是拼谁的选择器表达式写得更长，ID选择器才是王道！