web前端基础：CSS继承和层叠

CSS继承

从父元素那继承部分CSS属性；
• 可以定义多个样式
• 不冲突时，多个样式可层叠为一个
• 冲突时，按不同样式规则优先级来应用样式
样式继承关系

样式属性	继承	说明
width height	不继承	块级元素、替换元素 对于样式属性，通过设置值为inherit，指从父元素继承相对属性值。例：div{padding:10px;}div p{padding:inherit;}
padding	不继承
margin	不继承
border	不继承

CSS优先级

CSS使用方法优先级：
行内样式>内部样式>外部样式
说明：

1. 链入外部样式表与内部样式表之间的优先级取决于所处位置的先后
2. 最后定义的优先级最高（就近原则）
   CSS优先级规则:
   同一样式表中：
3. 权值相同
   就近原则（离被设置元素越近优先级越高）
4. 权值不同
   根据权值来判断CSS样式，
   哪种CSS样式权值高，就使用哪种样式
   选择器权值
   • 标签选择器：权值为1
   • 类选择器和伪类：权值为10
   • ID选择器：权值为100
   • 通配符选择器：权值为0
   • 行内样式：权值为1000
   权值规则
   • 统计不同选择器的个数
   • 每类选择器的个数乘以相应权值
   • 把所有的值相加得出选择器的权值

#main div.warning h2{…}

id :1 class:1 标签：2
1100=100 110=10 2*1=2
权值：100+10+2=112

！important规则
• 可调整样式规则的优先级
• 添加在样式规则之后，中间用空格隔开

div{corlor:red !important;}

CSS优先级总结
• !important声明高
• CSS使用方法的优先级
行内样式>内部样式>外部样式
注：link链入外部样式和style内部样式优先级，取决于先后顺序。
• 样式表中优先级
Id选择器>class选择器>标签选择器>通配符

权值相同	权值不同
就近原则	权值高的