CSS规则重要性以及继承、层叠

多个规则中只有一个胜出，那么怎么知道哪一个规则更强呢？答案在于每个选择器的特殊性。对于每个规则，用户代理会计算选择器的特殊性，并将这个特殊性附加到规则中的各个声明。如果一个元素有两个或者多个冲突的属性声明，那么有最高特殊性的声明就会胜出。（这并不是解决冲突的全部。实际上，所有样式冲突的解决都由层叠来处理）。

选择器的特殊性由选择器本身的组件确定。特殊性值表述为4个部分，如：0，0，0，0.一个选择器的具体特殊性如下确定：

对于选择其中给定的各个ID属性值，加0,1,0,0。对于选择其中给定的各个类属性值、属性选择或伪类，加0,0,1,0。伪元素特殊性为0,0,0,1。结合符和通配选择器对特殊性没有任何贡献。

一般地，第一个0是位内联样式声明保留的，它比所有其他声明的特殊性都高。

重要性，有时某个声明可能非常重要，超过了所有其他声明。在这些声明的结束分号之前插入!important来标志、!important总是放在声明的最后，即分号前面。如果一个属性的值可以包含多个关键字，这一点则尤为重要，必须将!important标志放在声明的最后。

实际上，所有!important声明会分组在一起，重要声明的特殊性冲突会再重要声明内部解决，而不会与非重要声明相混。类似地，我们认为所有非重要声明也归为一组，使用特殊性来解决冲突。如果一个重要声明和一个非重要声明冲突，胜出的总是重要声明。

在HTML中，对于向上传播规则有一个例外：应用到body元素的背景样式可以传递到html元素(html是文档的根元素），相应地可以定义其画布。

继承是CSS中最基本的内容之一，除非有必要的理由，否则一般不会特别考虑，正所谓熟视无睹。不过有几点需要记住。

首先，注意有些属性不能继承，这往往归因于一个简单的常识。例如，属性border就不会继承。一般地，大多数框模型都不能继承，其原因是一样的。继承的值根本没有特殊性，设置连0特殊性都没有。这看上去似乎只是理论上不同，不过等你了解到继承值没有特殊性会有什么结果时，就会知道这种差别绝不能忽视。

因为通配选择器适用于所有元素，而且有0特殊性，其颜色声明指定的值gray要优先于继承值，因为继承值根本没有特殊性。

由于它能匹配任何元素，所以通配选择器往往有一种短路继承的效果。这个问题可以解决，不过通常更合理的做法是从一开始就避免不加区别地使用通配选择器，从而从根本上避免这个问题。

 

如果特殊性相等的两个规则同时应用到同一个元素会怎么样呢。浏览器如何解决这个冲突。h1{color:red;} h1{color:blue}这两个规则的特殊性都是0,0,0,1。所以它们的权重相等，都应当应用到元素。但这是不可能的。

层叠样式表这个名字可能会提供一点提示。CSS所基于的方法就是让样式层叠在一起，这是通过继承和特殊性做到的。1，找到所有相关的规则，这些规则都包含与一个给定元素匹配的选择器。2，按显式权重对应用到该元素的所有声明排序。标志！important的规则的权重要高于没有!important标志的额规则。按来源对应用到给定元素的所有声明排序。共有3种来源：创作人员、读者和用户代理。正常情况下，创作人员的样式要胜过读者的样式。有!important标志的读者样式要强于所有其他样式。3.按特殊性对应到给定元素的所有声明排序。有较高特殊性的元素权重大于有较低特殊性的元素。4，按出线顺序对应用到给定元素的所有声明排序。

正是由于这种按顺序排序，所以才有了通常推荐的链接样式顺序。一般建议按link-visited-focus-hover-active。这些选择器的特殊性都是一样的0,0,1,0。因为它们都有同样地权重、来源和特殊性，因此与元素匹配的最后一个选择器才会胜出。正在点击的未访问链接可以与其中三个规则匹配：link,hover和active所以在这三个规则当中最后声明的而一个将胜出。