ecificity: 0104 */
#outer div ul li a {
color: yellow;
}
/* specificity: 0113 */
#outer div ul .nav a {
color: white;
}
/* specificity: 0024 */
div div li:nth-child(2) a:hover {
border: 10px solid black;
}
/* specificity: 0023 */
div li:nth-child(2) a:hover {
border: 10px dashed black;
}
/* specificity: 0033 */
div div .nav:nth-child(2) a:hover {
border: 10px double black;
}
a {
display: inline-block;
line-height: 40px;
font-size: 20px;
text-decoration: none;
text-align: center;
width: 200px;
margin-bottom: 10px;
}
ul {
padding: 0;
}
li {
list-style-type: none;
}
我们从这个代码中得到的结果如下：
这里发生了什么?首先，我们只对本例的前七个规则感兴趣，正如您将注意到的，我们已经在每个注释中包含了它们的专用性值。
- 前两个选择器正在竞争链接的背景颜色的样式——第二个赢得并使背景色为蓝色，因为它有一个额外的ID选择器在链中：其专用性值为201比101。
- 第三个和第四个选择器在链接文本颜色的样式上进行竞争——第二个选择器获胜，使文本变白，因为缺少一个元素选择器，缺少的选择器被换成类选择器，它的值是十，而不是个位。所以专用性值为113和104。
- 选择器5 - 7在徘徊在链接附近时的样式进行竞争。选择器六明显地输给了了五，其专用性值为23和24——它在链中少了一个元素选择器。然而选择器七同时击败了五和六——它有与五相同数量的子选择器在链中，但一个元素已被换为了一个类选择器。所以获胜的专用性值是33比23和24。
源代码次序
如上所述，如果多个相互竞争的选择器具有相同的重要性和专用性，那么第三个因素将帮助决定哪一个规则获胜——后面的规则将战胜先前的规则。例如:
p {
color: blue;
}
/* This rule will win over the first one */
p {
color: red;
}
而在这个例子中的第一个规则将获胜，因为专用性高于源代码顺序：
/* This rule will win */
.footnote {
color: blue;
}
p {
color: red;
}
关于规则混合的一点注记
在考虑所有这些层叠理论和什么样式优先于其他样式被应用时，你应该记住的一件事是，所有这些都发生在属性级别上——属性覆盖其他属性，但你不会让整个规则凌驾于其他规则之上。
当多个CSS规则匹配相同的元素时，它们都被应用到该元素中。只有在这之后，任何相互冲突的属性才会被评估，以确定哪种风格会战胜其他类型。
简记：只有相同的属性应用发生冲突后才会产生覆盖
让我们看一个例子。首先，一些HTML：
<p>I'm <strong>important</strong></p>
现在一些CSS风格与它：
/* specificity: 0002 */
p strong {
background-color: khaki;
color: green;
}
/* specificity: 0001 */
strong {
text-decoration: underline;
color: red;
}
Result:
在这个例子中，因为专用性的关系，第一条规则中的color属性覆盖掉了第二条中的颜色值。但是，对于第一条中的 background-color和第二条中的text-decoration 的属性都在strong元素之中得到了体现。你也注意到了这个元素之中的字体是加粗的：这是浏览器默认的样式规则。
继承
CSS继承是我们需要研究的最后一部分，以获取所有信息并了解什么样式应用于元素。
其思想是，应用于某个元素的一些属性值将由该元素的子元素继承，而有些则不会。
例如，对 font-family和 color进行继承是有意义的，因为这使得您可以很容易地设置一个站点范围的基本字体，方法是应用一个字体到 <html> 元素；然后，您可以在需要的地方覆盖单个元素的字体。如果要在每个元素上分别设置基本字体，那就太麻烦了。
再如，让 margin padding，border和 background-image 不被继承是有意义的。想象一下，如果您将这些属性设置在一个容器元素上，并将它们继承到每个子元素，然后不得不将它们全部放在每个单独的元素上，那么将会出现的样式/布局混乱。
哪些属性默认被继承哪些不被继承大部分符合常识。如果你想确定，你可以参考CSS参考资料—— 每个单独的属性页都会从一个汇总表开始，其中包含有关该元素的各种详细信息，包括是否被继承。
注：
font-family允许您通过给定一个有先后顺序的，由字体名或者字体族名组成的列表来为选定的元素设置字体。 属性的值用逗号隔开。浏览器会选择列表中第一个该计算机上有安装的字体，或者是通过 ‘ @font-face 指定的可以直接下载的字体。
padding属性设置一个元素的内边距，padding 区域指一个元素的内容和其边界之间的空间，该属性不能为负值。
background-image 属性用于为一个元素设置一个或者多个背景图像。图像在绘制时，以z方向堆叠的方式进行。先指定的图像会在之后指定的图像上面绘制。因此指定的第一个图像最接近用户。
控制继承
CSS为处理继承提供了四种特殊的通用属性值：
inherit： 该值将应用到选定元素的属性值设置为与其父元素一样。initial ：该值将应用到选定元素的属性值设置为与浏览器默认样式表中该元素设置的值一样。如果浏览器默认样式表中没有设置值，并且该属性是自然继承的，那么该属性值就被设置为 inherit。unset：该值将属性重置为其自然值，即如果属性是自然继承的，那么它就表现得像 inherit，否则就是表现得像 initial。revert：如果当前的节点没有应用任何样式，则将该属性恢复到它所拥有的值。换句话说，属性值被设置成自定义样式所定义的属性（如果被设置）， 否则属性值被设置成用户代理的默认样式。
注意: initial 和 unset 不被IE支持。
initial 是将属性的初始值( initial value)赋给元素 . initial 适用于所有的css 属性(属性的initial值可在属性表中查到)，包括css 简写属性(全局属性)all.
inherit 值是最有趣的——它允许我们显式地让一个元素从其父类继承一个属性值。
让我们看一个例子。首先有以下一段HTML：
<ul>
<li>Default <a href="#">link</a> color</li>
<li class="in