css优先级汇总
浏览数：22 /
时间：2015年06月09日
我所理解的css优先级：当两个或者多个样式作用于同一个元素时，就会出现css优先级的问题。
多重样式优先级：当内联样式、内部样式和外部样式作用于同一个元素时，属于多重样式的范畴。优先级的顺序为内联样式>内部样式>外部样式。
<head> <link href="style.css" rel="stylesheet" type="text/css" /> /*.color{color:red;}外部样式*/ <style>/*内部样式*/ .color{color:black;} <style/> </head> <body> <a href="" class="color" style="color:blue">我爱变色</a> /*内联样式*/ </body> /*不出意外的话，应该显示为蓝色，前提是内部样式要放在外部样式的后面*/
选择器的优先权：不同种类的选择器通过权值来计算其优先权的大小。
权值大小：
1.内联样式权值最高为[1000];
2.id选择器权值为[0100];
3.class、属性、伪类选择器权值为[0010];
4.元素标签、伪元素选择器权值为[0001];
5.通用选择器权值为[0000];
解释：权值是一个4位的数字串，从左到右，一级大于一级，每一级之间没有进制，不可跨越。在进行权值比较的时候，应该从左到由进行比较。
<style type="text/css"> .contain .box p{color:red}/*权值：0010+0010+0001=0021*/ .contain div p{color:black}/*权值：0010+0001+0001=0012*/ </style> <div class="contain"> <div class="box"> <p>颜色</p> </div> </div> /*p标签内容应该为红色*/
CSS 优先级法则：
A 选择器都有一个权值，权值越大越优先；
B 当权值相等时，后出现的样式表设置要优于先出现的样式表设置；
C 创作者的规则高于浏览者：即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式；
D 继承的CSS 样式不如后来指定的CSS 样式；
E 在同一组属性设置中标有“!important”规则的优先级最大
<style type="text/css"> div{background: red !important; background: blue} </style>
/*显示为红色，ie6显示为蓝色，在ie6下，!important跟没用是一样的效果*/
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
