选择器权重
样式类型
样式类型分为三类
1、行间
<h1 style="font-size:12px;color:#000;">我的行间CSS样式。</h1>
2、内联
<style type="text/css">
h1{font-size:12px;
color:#000;
}
</style>
3、外部
<link rel="stylesheet" href="css/style.css">
选择器类型
- 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
- !important 的作用是提升优先级，换句话说。加了这句的样式的优先级是最高的（比内联样式的优先级还高)。
<style>
p{
color:red !important;
}
</style>
<p style="color:blue;">我显示红色</p>
- ie7+和别的浏览器对important的这种作用的支持度都很好。只有ie6有些bug
p{
color:red !important;
color:blue;
}//会显示blue
但是这并不说明ie6不支持important，只是支持上有些bug。看下面
p{
color:red !important;
}
p{
color:blue;
} //这样就会显示的是red。说明ie6还是支持important的。</pre>
我们再来看一个具体的例子：假如有以下组样式规则，你能判断出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代码：
<div id="content">
<div id="main-content">
<h2>CSS简介</h2>
<p>CSS（Cascading Style Sheet，可译为“层叠样式表”或“级联样式表”）是一组格式设置规则，用于控制Web页面的外观。</p>
<div class="paragraph">
<h2 class="first">使用CSS布局的优点</h2>
<p>1、表现和内容相分离 2、提高页面浏览速度 3、易于维护和改版 4、使用CSS布局更符合现在的W3C标准.</p>
</div>
</div>
</div>
判断出来了么？答案是：两个标题都是红色的！
让我们来一起算算六个样式规则各自的特殊性的值：
第一个特殊性的值=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选择器才是王道！
