CSS基础概念 1.3解决样式冲突

在创建一个样式表的过程中，很可能有很多不同的规则将应用到一个元素上。例如，如果一个规则应用于所有的段落元素，另一个规则应用于所有含有有class属性且值为urgent的元素，那么应该使用哪一个规则？

碰巧的是，这两个规则都将应用。如果这两个不同的规则包含的声明是处理不同属性，那么它们没有冲突，样式都被“组合在一起”的。但是，如果这两个不同的规则有声明试图为同一个属性设置不同的值，那么有机制决定将实际使用哪些样式。

举例说明，假设有以下三个规则：

div#aside h1 {color: red; margin: 0.5em;}
h1.title {color:purple; font-weight: bold; margin-left: 3em;}
h1 {color: gray; font-style: italic;}

现在假设html文档包含一个H1元素由以上三个规则匹配。它应该显示什么样的样式？有三个相互矛盾的颜色值，并且它们的外边距的值也有冲突。凑巧的是，我们假设H1是红色，加粗，斜体，并且上，右，下，左的外边距的值为0.5em是答案。因此声明color:purple和color:red和margin-left:3em被推翻。我们得到这个答案的机制在下面进一步解释。

一、级联规则（Cascade Rules）

在决定文档的样式时，一些声明可能会互相冲突。例如，如果两个不同的声明要求所有的段落都是红色或者蓝色，哪一个会胜出？这个的过程通过级联来说明。级联规则如下：
　1.为目标媒体类型查找所有适用元素和属性声明，（即，如果当前媒体是屏幕的话，不应用打印媒体样式）。如果关联的选择器与元素相匹配，则应用声明。因此，只有html文档包含一个或多个H6元素，规则h6{color: navy;}中的声明才将被应用。
　2.声明主要是通过来源和权重进行排序。来源是指该声明的来源：作者的样式表，使用者的样式表，或用户代理内部的样式表（以下简称默认样式表）。导入样式表和导入它的样式表有相同的来源。 权重是指声明的重要性。正常的声明中，作者样式优先于用户自定 义        的样式表，用户自定义的样式表优先于默认样式表。关于"！improtant"声明，用户样式表的样式优先于作者样式表，作者样式表优先于默认的样式表。”!important”声明优先于正常声明。在本章后面可以看到关于"important"的更多细节。以下优先级依次增加：

　　浏览器用户代理默认样式表（user agent stylesheet）

　　用户自定义正常的样式表user declarations （normal）

　　开发人员正常的样式表author declarations （normal）

　　开发人员重要的样式表author declarations （!important）

　　用户自定义重要的样式表user declarations （!important）

　3.其次是通过选择器的特异性排序，更具体的选择器会优先于一般的选择器。伪元素和伪类如同正常元素和类被计数。在本章后面可以看到“特异性计算”的更多细节。

　4.最后，通过指定的顺序排序：如果两个规则具有相同的权重、起源和特异性，最后指定的获胜。 导入的样式表规则被认为是放置在任何嵌入式样式表规则之前。

二、特异性计算(specificity calculation)

在CSS中每一个选择器都会分配一个特异性。实际的特异性是根据选择器的组成计算，有以下规则：

1.计算选择器中ID选择器的数量（= a）

2.计算其他选择器和伪类选择器的数量(= b)

3.计算类型选择器的数量（= c）

4.忽略伪类元素

把三个值（a-b-c）连接后产生特异性值。请注意，这些数值不是以十进制为基准的。因此，尽管0-0-11与0-1-0可以表示为特异性值为"11"和"10"但是前者小于后者。正是基于这个原因，作者鼓励把特异性认为用 "逗号（,）" 或者“连字符（-）”分隔三个数字的列表。例如：

h1 {color: black;} 　　　　　　　　　　 /* 规格 =0-0-1 */

div ul li {color: gray;} 　　　　　　　　  /* 规格 =0-0-3 */

pre.example {color: white;}　　　　　　/* 规格 =0-1-1 */

div.help h1 em.term {color: black;} 　　  /* 规格 =0-2-3 */

#title {color: black;} 　　　　　　　　    /* 规格 =1-0-0 */

body ul#first li ol.steps li{color: black;}　 /* 规格 =1-1-5 */
如早先详细的“级联规则”，特异性比规则出现的顺序更重要。 因此，如果下面的两个选择器匹配这个相同的元素，第一个声明将覆盖第二个任何有冲突的声明。
div.credits {text-align: center; color: gray;}      /* 规格 =0-1-1 */
div {text-align: left; color: black;}　　　　　　/* 规格 =0-0-1 */
因此，由以上两条规则匹配的元素将有灰色、文本居中的效果。
不管相关选择器的特异性，重要的声明总是大于正常的声明（下一节将有更多的细节）。

三、重要性（importance）

可以使用!important 创建重要声明。对于重要声明它既不用在选择器上也不用在规则上，而是应用在实际的声明上。例如：

p {color: red; background: yellow !important; font-family: serif; }

在这个例子中，仅有background: yellow;声明是重要的，其余的两个声明不是。

如果有两个或多个的重要声明涉及同一个属性，那么使用特异性计算来解决冲突。

例如：

h2 {color: red !important; font-style: italic;}
h2 {color: green !important;}

因为两个color声明都是重要的，选择器也具有相同的特异性，那么第二个样式表胜出因为它在样式表中的后面。因此，h2元素的样式将为绿色的斜体——font-style声明在这种情况下不受影响。

四、继承（inheritance）

来自元素的许多样式可以继承到它的后代元素，除非选择器匹配的元素通过规则重新设置了这个属性，否则任何继承的样式将被应用到元素上。例如,考虑以下规则：

body{color: block;}
p{color: green;}

鉴于此，所有的段落的颜色将是绿色，而其他所有的元素的颜色将是黑色。注意，不管原始规则样式是什么特异性值还是附加了重要性，继承都可以被覆盖。例如：

div#summary{color: blank ！important;}
p {color:green;｝

任何id属性值为summary的div中的段落的颜色将是绿色的，因为明确指定的样式覆盖了继承样式。

然而，所有的属性（除了page）都可以给定一个继承的值。它指示用户代理首先确定父元素属性的值，并把值应用到当前元素中。因此，p{color: inherit ;}将设置任何段落的颜色与其父元素的颜色一样。这种提升的继承机制的优势在于可以明确的指定继承关系，而不依赖正常的继承机制作为“保障”。

五、简写属性（Shorthand Properties）

有少数CSS属性是简写属性。也就是说，它们是由多个属性组成的集合。例如，margin是margin-top,margin-right,margin-top,margin-bottom属性的简写。以下的两条规则将有同样的效果：

p {margin: 1em;}
p { margin-top:1em;
　 margin-right:1em;
　 margin-bottom:1em;
　 margin-left:1em;}

因此，作者必须避免属性和简写或两个简写属性之间的冲突。例如，考虑下面两条规则对匹配的元素的影响：

pre.example {margin: 1em;}
pre {margin-left: 3em;}

由于级联操作，任何class名为example的pre元素包括左外边距的所有外边距都是1em。简写属性的效果覆盖了pre规则中定义的值。

另一个好的案例是text-decoration，它不是简写属性但像简写属性一样工作。考虑以下规则：

h2 {text-decoration: overline;}
h2,h3 {text-decoration: underline;}

考虑这些规则，所有的h2元素都将是下划线而不是上画线。给定text-decoration的属性值不是组合，因为每个组合的关键字都有它独特的价值。如果要用下划线和上画线来装饰h2元素，那么必要的规则是：h2 {text-decoration: underline overline;}

下面总结了CSS中的简写属性以及它们代表了那些属性。

简写属性代表
background　　　　　　　　　　background-attachment,　　background-color，　　background-image，　　background-position，　　background-repeat
border　　　　　　　　　　　　 border-color,　　border-style,　　border-width
border-top　　　　　　　　　　border-top-color,　　border-top-style,　　border-top-width
border-right　　　　　　　　　　border-right-color,　　border-right-style,　　border-right-width
border-left　　　　　　　　　　border-left-color,　　border-top-style,　　border-left-width
border-bottom　　　　　　　　border-bottom-color,　　border-bottom-style,　　border-bottom-width
cue　　　　　　　　　　　　　　cue-before,　　cue-after
font　　　　　　　　　　　　　　font-family,　　font-size,　　font-style,　　font-weight,　　font-variant,　　line-height(以后还会添加 font-size-adjust 和 font-stretch)
顺序：font-style | font-variant | font-weight | font-size | line-height | font-family
list-style　　　　　　　　　　　　list-style-image,　　list-style-position,　　list-style-type
margin　　　　　　　　　　　　　margin-top,　　margin-right,　　margin-bottom,　　margin-left
outline　　　　　　　　　　　　　outline-color,　　outline-style,　　outline-width
padding　　　　　　　　　　　　padding-top,　　padding-right,　　padding-bottom,　　padding-left
pause　　　　　　　　　　　　　pause-after,　　pause-before