3.CSS笔记：特殊性、继承、层叠

本系列内容由ZouStrong整理收录

整理自 《写给大家看的CSS书（第2版）》、《CSS权威指南（第3版）》、《精彩绝伦的CSS》、《精通CSS：高级Web标准解决方案（第2版）》、CSS参考手册 css.doyoe.com

由于CSS选择器的强大，我们可以使用不同方法来选择同一个元素，因此，如果一个元素有两个以上的规则匹配，会怎样呢？

一. 特殊性（针对性）

特殊性的出现决定了应用样式时的优先级，决定了谁覆盖谁，是”层叠”的基础

特殊性可以，表述为4个部分

A——B——C——D
0  0  0  0

• 什么都不说，带!important的样式特殊性最高
  
• 对于内联样式，A位加1
  
• 对于选择器中给定的每个ID选择器，B位都加1
  
• 对于每个类选择器，伪类选择器，属性选择器，C位都加1
  
• 对于每个元素选择器，伪元素选择器，D位都加1
  
• 结合符(>,+,~….)和通配符（*）对特殊性无贡献，加0

小结

特殊性0,0,1,0比特殊性0,0,0,12高（也就是再多的元素选择器也不可能比一个类选择器的特殊性高，同理，再多类选择器也不可能比ID选择器高.....）

继承的值没有特殊性，0特殊性要比没有特殊性强，即定义的样式总是覆盖继承的样式

 <p id="test"><span>一段文字</span></p>

 * {color:blue;}
 p {color:red;}  /*显示蓝色*/

这个例子说明了不加区别的使用通配选择符可能存在的问题之一，由于它能匹配任何元素，所以通配选择符往往具有短路继承的效果（覆盖继承值）

#test {color:red;}
span {color:blue;}  /*仍然显示蓝色*/

注：如果都是继承值的话，那就看特殊性了

h1,h2,h3{color:red;}
h1{color:blue;}

h1显示蓝色,选择器分组实际上是这样的（所以说，选择器分组不是一种选择器）

h1{color:red;}
h2{color:red;}
h3{color:red;}
h1{color:blue;}

二. 继承

为元素应用某些CSS样式时，其后代元素也自动获得该样式，这种机制称之为继承，继承的存在有利于减少CSS代码，便于维护

可继承的属性有：

• 字体属性，颜色属性.....等

不可继承的属性：

• 盒模型属性（宽度、高度、内边距、外边距、边框）
  
• 定位属性（position）
  
• 所有背景属性
  
• text-decoration
  
• vertical-align等

注：之所以设置背景色等属性时，子元素也有效果，是因为背景色的默认值是transparent，是透明的，所以才会显示父元素的背景

继承值完全没有特殊性（比0特殊性还要低）这一点很重要

#tool { color : #F00; }

只要id为tool的元素内包含的是纯文本就不会有什么问题，但是如果包含一个超链接的话，那么它的颜色可能就是蓝色咯，因为开头的reset里总是会为超链接设置一些默认样式，此时必须如下声明

#tool a { color : #F00;}

三. 层叠

CSS层叠是指针对同一元设置置同一属性时，依据层叠规则（来源、特殊性）来处理冲突，选择权重高的CSS选择器所指定的属性（权重高的覆盖权重低的）

1. 首先，带 !important的规则无论如何都最终被应用

2. 其次，是内联样式

除此之外的符合以下层叠规则

3. 然后，考虑特殊性，特殊性高的声明优先被应用

特殊性相同时，那就要看来源了

4. 最后，考虑样式来源（由大到小）

• 用户的重要声明
  
• 开发人员的重要声明
  
• 开发人员的正常声明（嵌入样式，外部样式）
  
• 用户的正常声明
  
• 用户代理的声明

外部样式如果放在嵌入样式的后面，则外部样式也会覆盖内部样式，那么，其实，这两个权重是一样的咯？之所以说嵌入样式高于外部样式，TM的是因为嵌入样式几乎总是写在外部样式的后面，这是覆盖的问题了

5. 如果两个规则特殊性，来源都相同（即权重相同），则后一个出现的规则优先

6. 最后还要记得，定义的样式总是覆盖继承的样式

四. 总结

现在可以谈一谈为什么要按照 :link、:visited、:hover、:active的顺序声明链接样式了

因为他们的来源，特殊性都相同，所以只能以出现的顺序来决定层叠

如果，我们这样使用

:active {}
:hover {}
:link {}
:visited {}

将永远不会得到hover的样式，因为所有链接要么是已访问的，要么是未访问的....因此:hover和:active的样式最终都会被覆盖，不会显示出来