声明
本人也在不断的学习和积累中，文章中有不足和误导的地方还请见谅，可以给我留言指正。希望和大家共同进步，共建和谐学习环境。
一、样式类型
1、内联样式
<div style="font-size:24px">世界那么大! 我想出去看看！</div>
2、内部样式
<style>
div{font-size:24px;}
</style>
3、外部样式
<link href="demo.css" rel="stylesheet" type="text/css" />
二、权重计算规则
在CSS中，层叠优先级不只是内联样式> 内部样式表 > 外部样式表 > 浏览器缺省，会根据选择器的特殊性来决定所定义的样式规则次序，具有更特殊选择器的规则优先于具有一般选择器的规则，如果两个规则的特殊性相同，那么后定义的规则优先。那怎样才能提升选择器的特殊性值呢？
选择器的特殊性值表述为4个部分，用0,0,0,0表示。
第一等：代表内联样式，如: style=””，权值为1,0,0,0。
第二等：代表ID选择器，如：#content，权值为0,1,0,0。
第三等：代表类，伪类和属性选择器，如.content，权值为0,0,1,0。
第四等：代表类型选择器和伪元素选择器，如div p，权值为0,0,0,1。
注：通配符、子选择器、相邻选择器等的。如*、>、+,权值为0,0,0,0。继承的样式没有权值。
例：
<style>
a{color: yellow;} /*特殊性值：0,0,0,1*/
div a{color: green;} /*特殊性值：0,0,0,2*/
.demo a{color: black;} /*特殊性值：0,0,1,1*/
.demo input[type="text"]{color: blue;} /*特殊性值：0,0,2,1*/
.demo *[type="text"]{color: grey;} /*特殊性值：0,0,2,0*/
#demo a{color: orange;} /*特殊性值：0,1,0,1*/
div#demo a{color: red;} /*特殊性值：0,1,0,2*/
</style>
<a href="">第一条应该是黄色</a> <!--适用第1行规则-->
<div class="demo">
<input type="text" value="第二条应该是蓝色" /><!--适用第4、5行规则，第4行优先级高-->
<a href="">第三条应该是黑色</a><!--适用第2、3行规则，第3行优先级高-->
</div>
<div id="demo">
<a href="">第四条应该是红色</a><!--适用第5、6行规则，第6行优先级高-->
</div>
同一个等级的特殊性只在同一位上相加。权重比较顺序是从左向右逐个等级比较，前一等级相等才往后比。所以回答一下上面的问题——怎样才能提升选择器的特殊性值。最直接的方法就是增加更高级别的选择器。
例如
.demo .demo 此处省略7个.demo .demo{color:red} // 特殊性值：0,0,1*10,0 = 0,0,10,0
#demo{color:green} // 特殊性值：0,1,0,0
最后显示的字体颜色是绿色。
三、!import
为什么没有把!import放在优先级顺序中，因为官方认为!import和优先级没一点关系。而且在项目当中，尽量少用!import，会给后期的维护带来很大的困难。
- 绝不要在全站使用!import。
- 只在需要覆盖全站或外部 css的特定页面中使用 !important
- 永远不要在你的插件中使用 !important
- 要优先考虑使用样式规则的优先级来解决问题而不是 !important
注：如果已经使用了!important，如何改变样式呢？就是使用!important 的同时，再用上面说的拥有更高权重的选择器进行覆盖就行了。
网友评论