CSS 基本概念（Basic CSS Concepts）解决样式冲突

Posted 2020-08-06

三、解决样式冲突（Resolving Style Conflicts）

　　　　在创建一个样式表的过程中，很可能有许多不同的规则将适用于同一个元素。例如，如果一个规则适用于所有的段落元素，另一个规则适用于具有一个具有紧急值的类属性的所有元素，那么应该使用哪一个规则？

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

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

　　　　div#aside h1 {color: red; margin: 0.5em;}

　　　　h1.title {color:purple; font-weight: bold; margin-left: 3em;}

　　　　h1 {color: gray; font-style: italic;}

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

 

一、级联规则（Cascade Rules）

在决定使用文档的样式时，一些声明可能会互相冲突。例如，如果两个不同的声明要求所有的段落都是红色或者蓝色，那么应该选用那种定义颜色的声明？描述这个的过程是由级联说明的。级联规则如下：

　　1.对于目标媒体类型，查找适用于问题的元素和属性的所有声明（即，如果当前媒体是屏幕的话，不要使用打印媒体样式）。如果关联的选择器与问题中的元素相匹配，应用声明。因此，当且仅当文档包含一个或多个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是重要的，其余的两个声明不是重要的。如果在同一个属性中有两个或两个以上的重要声明，这时应该用到特异性计算来解决冲突。

　　　　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;}

　　　　所有属于div中id属性值为summary中的段落的颜色将是绿色的，因为指定的样式会覆盖掉继承的样式。

　　　　然而，所有的属性（除了页面）都可以给定一个继承的值。这指示浏览器首先确定父元素属性的值，并把值应用到当前元素中。因此，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元素都将只有下划线而不是上画线。h2指定的文本修饰的值并不支持，因为组合赋予了它一个新的关键字。如果需要用下划线和上画线装饰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

---