浅谈css特性

css一般有三大特性 层叠性，继承性，优先级，但是还是存在其他的特性，今天我便将其全部总结

一、特殊性

关于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贡献值 重要的	∞ 无穷大

稍后会说到improtant

特殊性是可以叠加的

比如的例子：

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

注意：

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

2. 继承的 特殊性是 0

3. 通配选择器无特殊性

4. 无特殊性，甚至连0特殊性都没有，因此对特殊性没有任何影响

5. 内联样式的特殊性比其他声明的特殊性都高

总结优先级：

1. 使用了 !important声明的规则。
2. 内嵌在 HTML 元素的 style属性里面的声明。
3. 使用了 ID 选择器的规则。
4. 使用了类选择器、属性选择器、伪元素和伪类选择器的规则。
5. 使用了元素选择器的规则。
6. 只包含一个通用选择器的规则。
7. 同一类选择器则遵循就近原则。

总结： 权重是优先级的算法，层叠是优先级的表现

二、CSS优先级

定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。

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

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

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

权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。

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

三、继承

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

简单的理解就是： 子承父业。
例如ul中的无序列表
注意：

1. 在html 中，对于向上传播规则有一个例外：应用到body元素的背景样式可以传递到html元素，相应的可以定义其画布。
2. 边框不会继承
3. 通配符存在短路继承，由于能匹配任何元素
4. 恰当地使用继承可以简化代码，降低CSS样式的复杂性。子元素可以继承父元素的样式（text-，font-，line-这些元素开头的都可以继承，以及color属性）

四、层叠

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

是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉

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

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

1. 样式冲突，遵循的原则是就近原则。 那个样式离着结构近，就执行那个样式。
2. 样式不冲突，不会层叠

注意： 在css权威指南中提到一点：层叠需要考虑按来源对应到应用到给定元素的所有声明排序
有三种来源：

• 创作人员
• 读者
• 用户代理
  规则如下：

1. 正常情况下，创作人员的样式要胜过读者的样式
2. 有 !improtant标志的读者样式要强于所有其他样式，这里包括有!improtant标志的创作人员样式
3. 创作人员样式和读者样式比用户代理的默认样式要强
4. 如果一个元素与创作人员样式表中的正常权重样式匹配，另外还与读者样式表中的正常权重样式匹配，则会使用创作人员的样式。

所以，需要考虑样式的权重和来源，来排序
总结：在声明权重方面需要考虑5级
1. 读者的重要声明
2. 创作人员的重要声明
3. 创作人员的正常声明
4. 读者的正常声明
5. 用户代理的声明
创作人员通常只需要考虑前4个权重级别，因为任何声明都会胜过用户代理样式。

五、 重要性

在声明的结束分号之前插入!important来标志
!important总是放在声明的最后，分号的前面，每个声明都要有自己的!important
例：

p.dark{ color: yellow !important; background: white !important;}
p.light{ color: pink; font: smaller Times, serif !important;}

如果将!important放在font声明的任何位置，整个声明都将无效，相应的不会应用其任何样式。

注意： !important的声明并没有特殊的特殊性值，不过与非重要声明分开考虑。实际上，所有的!important声明会分组在一起，重要声明的特殊性冲突会在重要声明内部解决，而不会与非重要声明相混淆；同样，所有的非重要声明也归为一组，使用特殊性来解决冲突。如果一个重要声明和非重要声明冲突，胜出的总是重要声明。
注意上面那段话，来自css权威指南，说明，重要性和特殊性是不同的性质，很多其他的网站上有介绍说重要性的特殊性为无穷大，包括我上边的表格，那样说只是很容易理解，可以也那样去理解，但是其实本质上，重要性声明要大于非重要性，同时重要性也存在特殊性的比较。