CSS三大特性

一、 继承性

1. 概念

父元素向后代元素传递属性的机制。

2.表现

后代元素会继承父元素的属性。

3.总结常用可继承的属性

font-size、font-style、font-weight、font-family、font、text-align、text-indent、cursor、list-style等

4.强制继承

每个CSS属性都接受这些值inherit，表示强制开启了继承”。

5.作用

恰当地使用继承可以简化代码，降低CSS样式的复杂性。

二、优先级

1.概述

浏览器通过优先级来判断哪些属性值与一个元素最为相关，从而在该元素上应用这些属性值。 样式不冲突，优先级没有意义。当同一个元素有多个冲突声明的时候，优先级才会有意义。

2.行内样式与选择器的优先级

概述：优先级是基于不同种类选择器组成的匹配规则。优先级就是分配给指定的 CSS 声明的一个权重，它由匹配的选择器中的每一种选择器类型的数值决定。

概述：选择器的权重表述为4个部分，比如０，０，０，０ 一个选择器的数值如下确定：

(１)对于选择器中给定的各个ID属性值，加１，０，０，０

(２)对于选择器中给定的各个类属性值、属性选择或伪类，加０，０，１，０

(３)对于选择器中给定的各个元素和伪元素，加０，０，０，１

(４)结合符和通配选择器对特殊性没有贡献．其特殊性为０，０，０，０

(５)每个内联声明的特殊性都是１，０，０，０

总结： 复合选择器的权值计算方式为:组成其所有单一选择器的权重累加；同级之前比较个数，不同级别不可跨越。

3.继承样式的优先级

概述：每一个直接作用于元素的 CSS 规则总是会接管/覆盖（take over）该元素从祖先元素继承而来的规则。

* > 继承属性

4.例外规则important

概述：当在一个样式声明中使用一个 !important 规则时，此声明将覆盖任何其他声明。

语法：

.box {
    background-color:red;!important
}

注意：一定要优先考虑使用样式规则的优先级来解决问题而不是 !important。

三、层叠性

概念：当样式声明发生冲突时，用户代理需要确定样式声明的最终值，既要考虑样式的来源又要考虑样式的特殊声明又要考虑优先级、以及先后顺序 ，这个过程就叫做层叠。

1.表现

• 开发者样式>浏览器默认样式

• 行间 > id > 类 > 元素名称 > * > 继承样式

• 当优先级与多个 CSS 声明中任意一个声明的优先级相等的时候，CSS 中最后的那个声明将会被应用到元素上，内部和外部样式遵循就近原则。

2.总结

CSS的层叠性是通过继承和优先级实现

• 样式声明不冲突 （同时应用于元素）

• 样式声明冲突

  • 同级选择器，CSS样式中最后定义的声明应用于元素（就近原则）

  • 不同级选择器，由选择器优先级决定