CSS样式-CSS的特性（层叠性、继承性、优先级）
CSS冲突：两个选择器针对同一个元素，设定同一个CSS属性
一、CSS层叠性：
两个选择器选到了同一个元素，并且对同一个CSS属性进行设定，那么后定义的CSS属性将覆盖先前定义的属性；
如果是针对不同的CSS属性进行设定，互不影响；
如果有些CSS属性冲突，有些不冲突，那么冲突的层叠，不冲突的互不影响；
二、CSS继承性：
一个元素的CSS属性可以继承自其父亲或者祖辈的CSS属性；
如果多个级别的祖辈元素对同一个CSS属性进行了设定，那么采取就近原则；
只有一部分的CSS属性是可以继承的，常用的可继承的CSS属性有：字体、color、line-height、text-align、text-indent；
举例：
<head>
<style type="text/css">
.animal {
color: #f00;
}
</style>
</head>
<body>
<div class="animal">
<p>小猫</p>
</div>
</body>
“小猫”的颜色为红色，继承了父级.animal的颜色属性
三、CSS优先级：
3.1原则：
如果优先级不同，高优先级的选择器将覆盖低优先级的选择器的CSS属性；
如果优先级相同，定义在后的选择器将覆盖定义在先的选择器的CSS属性；
3.2优先级（贡献值）的计算方法：
* 以及继承的样式优先级最低：0,0,0,0
元素（或者标记）优先级：0,0,0,1
类，伪类优先级：0,0,1,0
ID选择器优先级：0,1,0,0
行内样式优先级：1,0,0,0
举例：
<head>
<style type="text/css">
.animal {
color: #f00;
}
</style>
</head>
<body>
<div class="animal" style="color: #0f0">
<p>小猫</p>
</div>
</body>
“小猫”的颜色为绿色
!important优先级：无穷大
.animal {
color: #f00!important;
}
“小猫”的颜色为红色
3.3优先级比较方法：
把所有出现的单个选择器的优先级进行累加，不进位
先从最高位开始比较，最高位相同的话，再比较次高位，依次类推。。。
浙公网安备 33010602011771号