css的优先级
css样式的优先级对页面中的样式的表现有很大的影响。当你在页面中发现你自己的样式没有生效时，很有可能是css的优先级出了问题。
样式的优先级
多重样式（Multiple Styles）：如果外部样式、内部样式和内联样式同时应用于同一个元素，就是使多重样式的情况。
一般情况下，优先级如下：
（外部样式）External style sheet <（内部样式）Internal style sheet <（内联样式）Inline style
三者的区分见下图
<head>
<!-- 外部样式 style.css -->
<link rel="stylesheet" type="text/css" href="style.css"/>
<!-- 内部样式 -->
<style type="text/css">
h3{color:green;}
</style>
</head>
<body>
<!-- 内联样式 -->
<h3 style="color:red">测试！</h3>
</body>
选择器的优先级
选择器按如下规则确定优先级，组成的四位数越大者，优先级越高！
a = 行内样式style。
b = ID选择器的数量。
c = 类、伪类和属性选择器的数量。
d = 类型选择器和伪元素选择器的数量。选择器
| 选择器 | 等级(a,b,c,d) |
|---|---|
| style=”” | 1,0,0,0 |
| #wrapper #content {} | 0,2,0,0 |
| #content .dateposted {} | 0,1,1,0 |
| div#content {} | 0,1,0,1 |
| #content p {} | 0,1,0,1 |
| #content {} | 0,1,0,0 |
| p.comment .dateposted {} | 0,0,2,1 |
| div.comment p {} | 0,0,1,2 |
| .comment p {} | 0,0,1,1 |
| p.comment {} | 0,0,1,1 |
| .comment {} | 0,0,1,0 |
| div p {} | 0,0,0,2 |
| p {} | 0,0,0,1 |
css优先级终极法则
- 选择器都有一个权值，权值越大越优先；
- 都为外部样式时，样式越靠后的，渲染顺序越后；因此，则在相同选择优先级的情况下，该外部样式内的样式设置优先级越高；
- 创作者的规则高于浏览者：即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式；
- 继承的CSS 样式不如后来指定的CSS 样式；
- 在同一组属性设置中标有“!important”规则的优先级最大；示例如下：
- 使用js脚本增加样式时，不同的浏览器可能会有不同的表现，这与渲染顺序等有关，如有问题请自行多次尝试(不建议用js进行样式的设置，应该做到css、js和html的分离)。