CSS的编码规范和三大特性

通常我们有一些CSS默认编码规范，并不是不按这个写，浏览器认不出来，浏览器比你想象的强大，但是按照编码规范写代码体现了专业性。

CSS编码规范

格式规范

• 选择器和后面的”{“大括号之间要有一个空格
• 属性名和”:”冒号之间没有空格，”:”冒号和属性值之间有一个空格，结尾有”;”分号，且无空格分隔
• 

选择器规范

• 当选择器是并集选择器时，每个并集选择器独占一行
• 后代\子代选择器不建议超过5层；在能达到选择且层数可控的条件下，优先使用子代选择器
• 

属性的规范

• 每个属性自己单起一行

CSS的三大特性

两个选择器针对同一个元素，设定同一个CSS属性。如何解决冲突呢？

CSS层叠性

• 两个选择器选到了同一个元素，并且对同一个CSS属性进行设定，那么后定义的CSS属性将覆盖先前定义的CSS属性
• 如果是针对不同的CSS属性进行设定，互不影响
• 如果有些CSS属性冲突，有些不冲突，那么冲突的层叠，不冲突的互不影响

CSS的继承性

• 一个元素的CSS属性可以继承自其父亲或者祖辈的CSS属性
• 如果多个级别的祖辈元素对同一个CSS属性进行了设定，那么采取就近原则
• 只有一部分的CSS属性是可以继承的。 常用的可继承的CSS属性：字体，color，line-height，text-align，text-indent

CSS优先级

• 原则

1. 如果优先级不同，高优先级的选择器将覆盖低优先级的选择器的CSS属性
2. 如果优先级相同，定义在后的选择器将覆盖定义在先的选择器的CSS属性

• 优先级（贡献值）的计算方法

1. *，继承 = 0,0,0,0
2. 元素（标签）= 0,0,0,1
3. 类，伪类 = 0,0,1,0
4. ID = 0,1,0,0
5. 行内 = 1,0,0,0
6. !important = ∞
7. 复合的选择器的优先级    把所有出现的单个选择器的优先级进行累加，不进位

案例：