W3/CSS2文档翻译：6 赋予属性值/层叠及继承，6 Assigning property values, Cascading, and Inheritance

计算出来的值，是在不对文档进行格式化的情况下尽可能做处理所得到的。然而，某些值，只有在文档被实际排版的情况下才能够确定。例如，某个元素的宽度，被设置为，其容器块的某个百分比，则，在其容器块的宽度被确定之前，该元素的宽度是无法确定的。使用的值，就是，将计算出来的值包含在内，并且解析了任何遗留的依赖关系之后，得出的绝对值。

6.1.4 实际值

使用的值，是在渲染过程中用到的值，但是，在特定环境下，浏览器可能无法使用该值。例如，浏览器可能只能以整数像素的宽度来渲染边界线，因而可能需要对计算出来的宽度进行四舍五入；或者，浏览器可能被设置为强制使用黑色和白色，而无法使用完整的彩色。实际值呢，会是将使用的值做了必要的近似之后，得到的值。

6.2 继承

前面已经说过，在文档树中，某些值会被某个元素的子代元素继承。每个属性，都会定义，它是否是通过继承而来。

假设，在某个H1 元素中，有一个强调元素(EM)：

如果未对该EM 元素赋予颜色值，则，被强调的"狠"会继承亲代元素的颜色，因此，如果该H1元素的颜色是蓝色，则，该EM元素极有可能也是蓝色。

当继承发生时，元素会继承计算出来的值。亲代元素的计算出来的值，会同时成为子代元素的指定值和计算出来的值。

例如，看下面这个样式单：

body { font-size: 10pt }

h1 { font-size: 130% }

以下下面这个文档代码片断：

<BODY>

<H1>A <EM>large</EM> heading</H1>

</BODY>

H1 元素的'font-size'属性，其计算出来的值是'13pt'(130% 乘以 10pt ，后者是其亲代的值 )。由于 'font-size' 的计算出来的值是继承的，所以， EM元素也会获得其计算出来的值为'13pt'。如果该浏览器不支持13pt 尺寸的字体，则，H1 和EM 的 'font-size' 属性的实际值，就可能会是'12pt'。

注意，继承关系是按照文档树来确定的，不会受匿名盒子的影响。

6.2.1 继承  （'inherit'）值

每个属性，都可以将其值设置为'inherit'，它表示，对于某个指定的元素，以该元素的亲代元素的指定的值作为其指定的值。'inherit'值可用来强制对值进行继承，并且也可用来处理那些一般情况下不会继承的属性。

如果将根元素的某个属性的值设置为'inherit'，则，该属性会被赋予其初始值。

在下面的示例中，对BODY 元素设置了 'color' 和 'background' 属性。对于其它所有的元素，会继承'color'的值，而其背景会是透明的。如果这些规则是用户的样式单中的一部分，则，在整个文档中，都会是，白色背景和黑色文字。

body {

color: black !important;

background: white !important;

}

* {

color: inherit !important;

background: transparent !important;

}

6.3 @import规则

'@import' 规则可用来导入其它样式单中的样式规则。在 CSS 2.1 中，所有的 @import规则都必须处于其它规则之前 (例外情况是 @charset规则) 。参考解析小节，以了解，浏览器在什么情况下必须忽略@import规则。 '@import '关键字后面必须跟上要包含的样式单的URI。也可以使用一个字符串；它会被解释为好像被url(...)包围一样。

以下两行代码是等价的，它们演示了'@import'的不同语法(一个带了"url()"，另一个是裸字符串):

@import "mystyle.css";

@import url("mystyle.css");

为了避免让浏览器针对不支持的媒体类型来获取资源，作者可以使用与媒体相关的@import规则。这种条件式的 import语句中，应当在 URI 后面以逗号分隔写上所有的媒体类型。

以下规则代码演示了，如何以与媒体相关的方式来使用@import规则：

@import url("fineprint.css") print;

@import url("bluish.css") projection, tv;

如果未指定任何媒体类型，则，该import语句是无条件的。如果将媒体类型指定为'all'，则效果一样。只有当目标媒体与此处指定的媒体列表匹配时，该import才会生效。

如果指定的媒体列表中有某一项与目标媒体相同或者就是'all'，则目标媒体与此媒体列表匹配。

注意，媒体查询（Media Queries [MEDIAQ] ）对媒体列表和匹配定义进行了扩展。

如果同一个样式单被某个文档在多个地方导入或链接的话，则，浏览器必须处理（或者，最起码要装作处理了）每个链接，以使得，就好像它们是被链接到不同的样式单一样。

6.4 层叠

样式单，可以有3种不同的来源：作者、用户以及浏览器。

•. 作者：作者，按照文档语言的规则，指定某个源文档的样式单。例如，在 HTML 中，可在文档里包含样式单，或者链接到样式单。

•. 用户：用户，可为特定的文档指定特殊的样式信息。例如，用户可以指定一个文件，其中包含着一个样式单，或者，浏览器可以提供一个界面以用来生成一个样式单（或者装做就好像生成了一样）。

•. 浏览器：符合要求的浏览器必须提供一个默认的样式单 (或者，装做就好像提供了一个一样 ) 。浏览器的默认样式单，应当按照该文档语言中最通用的样式来显示其中的元素 ( 例如，对于图形界面的浏览器，HTML 中的EM 元素，会使用斜体来显示 ) 。参考针对 HTML 的一个简单的样式单，以了解，对于HTML 文档的建议的默认样式单。

注意，用户可能会修改系统设置(例如，系统颜色配置)，那样会影响到默认样式单。但是，在某些浏览器的实现中，无法改变默认样式单中的那些值。

来自这3种来源的样式单，它们的作用域会重叠，因此它们按照层叠规则来起作用。

CSS的层叠规则，给每个样式规则赋予一个权值。如果多条规则都对同一个元素有效，则，拥有最大权值的那条规则会起作用。

默认情况下，作者提供的样式单中的规则，比用户提供的样式单中的规则的权值要大。但是，对于带有 "!important" 的规则呢，其优先级又是反过来的。所有的用户样式规则和作者样式规则的权值都比浏览器的默认样式规则的权值要大。

6.4.1 层叠顺序

要想计算出某个元素的某个属性的值，浏览器必须按照以下顺序来计算：

1. 针对目标媒体类型，找到所有对于当前元素的当前属性有效的规则声明。如果满足以下条件，则某个规则对于某个属性是有效的：所关联的选择器匹配当前元素；并且，在包含着该规则声明的所有@media规则和所有链接到该样式单的语句的媒体列表中，匹配了目标媒体。
2.根据重要性(一般还是重要)和来源(作者、用户还是浏览器)来排序。优先级从低到高的顺序是：
1. 1.浏览器的声明
2. 2.用户的一般声明
3. 3.作者的一般声明
4. 4.作者的重要声明
5. 5.用户的重要声明
3. 对于具有相同重要性和来源的规则，按照选择器的精确度来排序：更精确的那些规则，会覆盖掉更宽泛的那些规则。伪元素和伪类，分别会作为普通元素和普通类来处理。
4.最终，按照出现顺序来排序：如果两条规则声明具有相同的权值、来源和精确度，则，后出现的规则会生效。在导入的样式单中声明的那些规则，被认为是位于当前样式单中的所有规则之前。

抛开那些可以针对单个声明使用的 "!important"选项不看，这里的这个策略，使得，作者的样式单相对于读者自己提供的样式单，具有更高的权值。浏览器必须为用户提供一种手段，使得用户能够关闭特定的作者样式单的影响，例如，提供一个下拉菜单。参考 UAAG 1.0 的检查点 4.14 [UAAG10] 。

6.4.2 !important规则

CSS尝试着在作者和用户样式单之间取得一个平衡。默认情况下，作者样式单中的规则会覆盖掉用户样式单中的规则(参考层叠规则3)。

然而，出于平衡性的考虑，"!important"声明(在声明之后，跟着定义符"!"和关键字"important")会优先于普通声明。作者样式单和用户样式单中都可以有"!important"声明，但是，用户样式单中的"!important"规则会覆盖掉作者样式单中的"!important"规则。这个CSS特性，提升了文档的可用性，让那些有特殊需求（大字体、颜色组合，等等）的用户能够控制显式情况。

将一个缩写属性 (例如， 'background' )声明为 "!important" ，等价于，将它的所有子属性声明为 "!important" 。

下面例子中，用户样式单的第一条规则中包含了一个"!important"声明，这使得，它覆盖掉了作者样式单中对应的声明。第二条规则声明，也是因为有一个"!important"而具有更高优先级。但是，用户样式单中的第三条规则声明，没有"!important"，因而，会被作者样式单中的第二条规则（它设置了一个缩写属性）覆盖。并且，作者样式单中的第三条规则，也因为第二条规则带有"!important"而被覆盖。这表明，"!important"声明在作者样式单内部也会起到作用。

/* 来自用户样式单 */

p { text-indent: 1em ! important }

p { font-style: italic ! important }

p { font-size: 18pt }

/* 来自作者样式单 */

p { text-indent: 1.5em !important }

p { font: normal 12pt sans-serif !important }

p { font-size: 24pt }

6.4.3 计算选择器的精确度

选择器精确度，按照以下规则来计算：

•.如果该声明来自于一个'style'属性，而不是来自于某个选择器对应的规则，则得分1，否则得分0(= a) (在HTML中，某个元素的"style"属性的值，也是样式单规则。这些规则不带选择器，因而，a=1, b=0, c=0, d=0。)
•.记录该选择器中ID 属性的个数，作为得分(= b)
•.记录该选择器中其它属性及伪类的个数，作为得分(= c)
•.记录该选择器中元素名字及伪元素的个数，作为得分(= d)

精确度只由选择器的形式来确定。特别说明，"[id=p33]"这种形式的选择器，仍然会被当成是一个属性选择器(a=0, b=0, c=1, d=0)，即使在源文档的DTD 中，id属性被定义为一个“标识符”（"ID"）也是如此。

将4个数字连接起来a-b-c-d (要使用一个取值范围较大的数字系统)就得到了精确度。

举些例子：

* {} /* a=0 b=0 c=0 d=0 -> 精确度 = 0,0,0,0 */

li {} /* a=0 b=0 c=0 d=1 -> 精确度 = 0,0,0,1 */

li:first-line {} /* a=0 b=0 c=0 d=2 -> 精确度 = 0,0,0,2 */

ul li {} /* a=0 b=0 c=0 d=2 -> 精确度 = 0,0,0,2 */

ul ol+li {} /* a=0 b=0 c=0 d=3 -> 精确度 = 0,0,0,3 */

h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 -> 精确度 = 0,0,1,1 */

ul ol li.red {} /* a=0 b=0 c=1 d=3 -> 精确度 = 0,0,1,3 */

li.red.level {} /* a=0 b=0 c=2 d=1 -> 精确度 = 0,0,2,1 */

#x34y {} /* a=0 b=1 c=0 d=0 -> 精确度 = 0,1,0,0 */

style="" /* a=1 b=0 c=0 d=0 -> 精确度 = 1,0,0,0 */

<HEAD>

#x97z { color: red }

</STYLE>

</HEAD>

<BODY>

</BODY>

在上面的示例中，该P元素的颜色会是绿色的。"style"属性中声明的样式规则会覆盖掉STYLE 元素中声明的样式规则，因为，根据层叠规则3，它具有更高的精确度。

6.4.4 非CSS 的显示提示规则之间的优先级顺序

浏览器可能会遵守HTML 源文档中的那些显示属性的要求。如果是这样的话，则，这些属性会被翻译为对应的CSS规则，并且其精确度为0，并且，会被认为是出现在作者样式单的最开头。因此，它们会被后续的样式单规则覆盖掉。在过渡时期，这种策略有助于让那些样式属性与样式单并存。

对于HTML，任何一个不在以下列表中的属性，都应当被看作是显示属性：abbr, accept-charset, accept, accesskey, action, alt, archive, axis, charset, checked, cite, class, classid, code, codebase, codetype, colspan, coords, data, datetime, declare, defer, dir, disabled, enctype, for, headers, href, hreflang, http-equiv, id, ismap, label, lang, language, longdesc, maxlength, media, method, multiple, name, nohref, object, onblur, onchange, onclick, ondblclick, onfocus, onkeydown, onkeypress, onkeyup, onload, onload, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onreset, onselect, onsubmit, onunload, onunload, profile, prompt, readonly, rel, rev, rowspan, scheme, scope, selected, shape, span, src, standby, start, style, summary, title, type (对于LI、OL和UL元素除外), usemap, value, valuetype, version。

对于其它语言，所有基于文档语言的样式规则，都必须被翻译成相应的CSS，并且，二选一：按照浏览器样式单的级别加入到层叠过程中；或者，就像HTML的显示提示规则这样，被当作作者样式单级别的规则，认为其精确度为0，并且放置在作者样式单的开头。

以下样式单，会覆盖掉所有文档中的'b'元素的字体重量，以及，XML 文档中带有color 属性的'font'元素的颜色。它不会影响HTML 文档中带有color 属性的'font'元素的颜色：

b { font-weight: normal; }

font[color] { color: orange; }

然而，以下样式规则，会覆盖掉所有文档中 font 元素的颜色：

font[color] { color: orange ! important; }

道晖芝

RETWEET if you loved tonight’s episode of # ChicagoFire – and join us next week for the epic season finale.

Your opinions

Your name:

Email:Website url:Opinion content:

- no title specified

HxLauncher: Launch Android applications by voice commands