CSS08 - CSS 特性

层叠、继承、优先级，是 CSS 的三个重要特性。

层叠

所谓层叠性，是指多种 CSS 样式的叠加。

比如先给某个标签指定了内部文字颜色为红色，接着又指定了颜色为蓝色，此时出现一个标签指定了相同样式不同值的情况，这就是样式冲突。

关于层叠，CSS 最后的执行口诀： 长江后浪推前浪，前浪死在沙滩上。

一般情况下，如果出现样式冲突，则会按照 CSS 书写的顺序，以最后的样式为准。

继承性

所谓继承性是指书写 CSS 样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。

简单的理解就是： 子承父业。

关于继承，CSS 最后的执行口诀： 龙生龙，凤生凤，老鼠生的孩子会打洞。

优先级

定义 CSS 样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。优先级的问题很好解决，总结一句话就是 ” 就近原则 “ ，即距离标签最近的样式会被执行，但 ” 就近原则 “ 有时可能会失效，这时候就需要考虑下权重了。

权重

在考虑权重时，还需要注意一些特殊的情况，具体如下：

1）继承样式的权重为 0。即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，它的权重都为 0，也就是说子元素定义的样式会覆盖继承来的样式。

2）行内样式优先。应用 style 属性的元素，其行内样式的权重非常高，可以理解为远大于 100。总之，他拥有比上面提到的选择器都大的优先级。

3）权重相同时，CSS 遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的（浏览器执行代码时是从上到下开始执行的）样式优先级最大。

4）CSS 定义了一个!important 命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!important 都具有最大优先级。

权重的计算

关于 css 权重，有一套计算公式去计算，这个就是 CSS Specificity，称为 CSS 特性或称非凡性，它是一个衡量 CSS 值优先级的一个标准 具体规范入如下：

specificity 用一个四位的数字串 ( CSS2 是三位 ) 来表示，更像四个级别，值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。

继承或者* 的贡献值 ------------> 0,0,0,0

每个元素（标签）贡献值为 ----->0,0,0,1

每个类、伪类贡献值为 ---------->0,0,1,0

每个 ID 贡献值为 ----------------->0,1,0,0

每个行内样式贡献值 ------------->1,0,0,0

每个!important 贡献值 ----------->∞ 无穷大

示例：：

div ul li --------> 0,0,0,3

.nav ul li ------> 0,0,1,2

a:hover -------> 0,0,1,1

.nav a ----------> 0,0,1,1

#nav p ---------> 0,1,0,1

注意： 数位之间没有进制 比如说： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0， 所以不会存在 10 个 div 能赶上一个类选择器的情况。

优先级总结：

css 的优先级由高到底依次为：

1.使用了 !important 声明的规则。

2.内嵌在 HTML 元素的 style 属性里面的声明。

3.使用了 ID 选择器的规则。

4.使用了类选择器、属性选择器、伪元素和伪类选择器的规则。

5.使用了元素选择器的规则。

6.只包含一个通用选择器的规则。