CSS匹配规则参考
CSS匹配规则参考
11.2 CSS匹配规则参考
本节简单地介绍CSS Level 1和CSS Level 2匹配XML的规则。关于CSS的属性、属性取值等内容不在本书的讨论范围中，在万维网联合会的网站上，可以读到关于CSS的规范说明：http://www.w3.org/Style/CSS/。
注意：微软的Internet Explorer 6.0仅支持CSS Level 1，尚未实现CSS Level 2的匹配规则；Internet Explorer 7.0部分支持CSS Level 2。目前对CSS支持较好的浏览器是Opera 9和Mozilla FireFox 2。
11.2.1 选择子匹配元素
CSS匹配规则的格式如下：
ElementName {
Property1: value1;
Property2: value21 value22;
}
其各部分分述如下。
（1）代码中“{”和“}”花括号中间的内容表示一条CSS规则（rule）。
（2）花括号前的内容称为“选择子”（Selector），用于指定规则的作用范围。如上述代码的“ElementName”表示这条规则将用于匹配“ElementName”元素。
（3）在规则中，“Property1:”为样式属性（Property）名称，后面的“value1”表示样式属性的值。
（4）一条规则中可以包含多个属性，每个属性以分号“;”结束。规则中的最后一个属性可以省略其分号标记。
（5）某些CSS属性可包含多个值，每个值之间用空格分隔（如“value21 value22”）。
（6）属性的名称和值一般不区分大小写。
说明：由于XML是区分大小写的，所以CSS中的元素名也区分大小写。但CSS的属性和属性值不区分大小写。CSS属性中的URL文件路径则根据URL所指向的文件所在的操作系统而异。
如以下CSS代码表示匹配XML文档中所有“abbr”元素，其字体样式（font-style）属性为斜体（italic）。
abbr {
font-style: italic;
}
以下CSS代码表示匹配XML文档中所有“book”元素，其边框（Border）属性包含3个值，分别指定边框的宽度、样式和颜色。
book {
border: 3pt double black;
}
11.2.2 继承
先代元素被某个CSS规则匹配后，后代元素将继承（Inheritance）先代元素的某些呈现属性。对于以下XML文档片段：
<book>
<chapter>Chapter1</chapter>
<paragraph>Paragraph1</paragraph>
</book>
使用以下CSS代码匹配“book”元素：
book {
text-decoration: underline;
}
“book”元素的下划线（underline）属性将被其后代元素“chapter”和“paragraph”继承，因此“chapter”元素和“paragraph”元素都以下划线文本的方式呈现。
说明：不同的CSS属性有不同的继承特性，请参阅CSS建议规范。
11.2.3 后代选择子匹配后代元素
在选择子中，可以同时书写多个元素，各元素之间以空格分开，表示按层次匹配后代元素。CSS样式将作用于该层次列表的最后一级元素，如以下的“ElementName3”元素（该元素为“ElementName2”的后代元素，而“ElementName2”元素又为“ElementName1”的后代元素）。
ElementName1 ElementName2 ElementName3 {
Property1: value1;
Property2: value21 value22;
}
注意：层次匹配具有比元素匹配更高的优先级。如在层次匹配和元素匹配中定义了冲突的规则属性，则以层次匹配中定义的优先。
如以下CSS代码中有两条规则，第1条规则匹配“title”元素，第2条规则匹配“chapter”元素的“title”后代元素。这样，“chapter”的“title”后代元素会同时被这两条规则匹配。在这两条规则中，都指定了“text-align”属性。由于“chapter title”比“title”更具体，具有更高的优先级，因此，“text-align”属性的实际取值为“chapter title”中的取值“left”，即所有“chapter”元素内的“title”元素都以左对齐方式显示。
title {
text-align: center; /* 居中显示文本 */
font-size: 24pt;
font-weight: bold;
color: brown;
}
chapter title {
font-size: 14pt;
text-align: left; /* 左对齐显示文本 */
}
层次匹配的元素列表中，后面的元素只要是前面元素的后代元素，即被规则匹配。如上述“chapter title”规则同时匹配下面XML代码的两个“title”元素。
<chapter>
<title>Title1</title>
<sub-chapter>
<title>Title2</title>
</sub-chapter>
</chapter>
11.2.4 使用组合同时匹配多个元素
如果将相同的规则应用于多个匹配条件，可以用逗号将各个匹配条件分开。其形式如下：
ConditionElement1,
ConditionElement21 ConditionElement22 {
Property1: value1;
Property2: value21 value22;
}
以下CSS代码同时匹配“book”、“title”、“author”元素，以及“body”元素内的“paragraph”元素。
book, title, author, body paragraph {
display: block;
}
11.2.5 通用选择子通配所有元素
通配符是CSS Level 2中的特性，匹配所有元素。形式如下：
* {
Property1: value1;
Property2: value21 value22;
}
/* 匹配“Element1”元素内的所有后代元素 */
Element1 * {
Property1: value1;
Property2: value21 value22;
}
以下CSS代码匹配“body”元素下的所有后代元素。
body * {
font-size: 14pt;
text-align: left;
}
11.2.6 子代选择子匹配子元素
子元素匹配是CSS Level 2中的特性，格式是在父元素和子元素之间添加一个“>”号。形式如下：
ParentElement1 > ParentElement2 {
Property1: value1;
Property2: value21 value22;
}
以下CSS代码匹配“chapter”元素的“title”子元素。
chapter > title {
font-size: 14pt;
text-align: left;
}
上述CSS代码匹配下面XML代码的第1个“title”元素。
<chapter>
<title>Title1</title>
<sub-chapter>
<title>Title2</title>
</sub-chapter>
</chapter>
11.2.7 兄弟选择子匹配兄弟元素
兄弟元素匹配是CSS Level 2中的特性，格式是在前导兄弟元素和后继兄弟元素之间添加一个“+”号。形式如下：
PrecedingElement1 + Element2 {
Property1: value1;
Property2: value21 value22;
}
以下CSS代码匹配紧随“title”元素之后的“paragraph”子元素。
title + paragraph {
font-size: 14pt;
}
上述CSS代码匹配下面XML代码中“title”元素后的第1个“paragraph”元素。
<body>
<chapter>
<title>Title2</title>
<paragraph>Paragraph 1</paragraph>
<paragraph>Paragraph 2</paragraph>
</chapter>
</body>
11.2.8 第一子元素伪类匹配第一子元素
第一子元素匹配是CSS Level 2中的特性，格式是在子元素后添加“:first-child”伪类（Pseudo-class）。形式如下：
ChildElement:first-child {
Property1: value1;
Property2: value21 value22;
}
以下CSS代码匹配位于第一子元素位置的“title”元素。
title:first-child {
font-size: 24pt;
}
上述CSS代码匹配下面XML代码中“chapter”元素下的第1个“title”元素。
<body>
<chapter>
<title>Title 1</title>
<paragraph>Paragraph 1</paragraph>
<paragraph>Paragraph 2</paragraph>
<title>Title 2</title>
</chapter>
</body>
11.2.9 属性选择子匹配指定属性的元素
元素属性匹配是CSS Level 2中的特性，格式是在元素后添加一对“[]”号，中间写上所匹配的属性列表。形式如下：
/* 匹配具有“attribute”属性的“Element1”元素 */
Element1[attribute] {
Property1: value1;
Property2: value21 value22;
}
/* 匹配具有“attribute”属性，且该属性值等于“attrValue1”的“Element1”元素 */
Element1[attribute="attrValue1"] {
Property1: value1;
Property2: value21 value22;
}
/* 匹配具有“attribute”属性，且该属性值是空格分隔的列表形式（如：“attribute="attrValue1 attrValue2 attrValue3"”），同时其中某一个等于“attrValue1”的“Element1”元素 */
Element1[attribute~="attrValue1"] {
Property1: value1;
Property2: value21 value22;
}
/* 匹配具有“lang”属性，且该属性值是减号“-”分隔的形式（如：“lang="zh-cn"”）和
“zh”开始的“Element1”元素 */
Element1[lang|="zh"] {
Property1: value1;
Property2: value21 value22;
}
/* 匹配同时具有“attribute1”和“attribute2”属性，且名称为“Element1”的元素 */
Element1[attribute1][attribute2] {
Property1: value1;
Property2: value21 value22;
}
/* 匹配具有“attribute1”属性，其值为“attrValue1”，
另还具有“attribute2”属性，其值为“attrValue2”，
名称为“Element1”的元素 */
Element1[attribute1="attrValue1"][attribute2="attrValue2"] {
Property1: value1;
Property2: value21 value22;
}
/* 匹配所有具有“attribute”属性的元素（“[”前的“*”可省略） */
*[attribute] {
Property1: value1;
Property2: value21 value22;
}
以下CSS代码匹配具有“class="important"”属性的“paragraph”元素。
paragraph[class="important"] {
font-size: 24pt;
color: red;
}
上述CSS代码匹配下面XML代码中具有“class="important"”属性的“paragraph”元素。
<body>
<chapter>
<title>Title 1</title>
<paragraph>Paragraph 1</paragraph>
<paragraph class="important">Paragraph 2</paragraph>
</chapter>
</body>
11.2.10 类选择子与ID选择子
类选择子和ID选择子是比较特殊的属性选择子，常用于HTML和XHTML的CSS，在XML的CSS中比较少用。
1．类选择子（Class selector）
在HTML或XHTML中，“class”属性有特别的含义，可以用CSS的类选择子匹配。类选择子的语法是一个“.”号。如下示例匹配具有“class="important"”属性的“table”元素。
table.important {
font-size: 24pt;
color: red;
}
2．ID选择子（ID selector）
在HTML或XHTML中，元素的“id”属性是ID属性，可以用CSS的ID选择子匹配。ID选择子的语法是一个“#”号。如下示例匹配具有“id="k456"”属性的元素。
#k456 {
font-size: 24pt;
color: red;
}
在XML中，元素的ID属性在DTD中指定。如已用DTD指定“chapter”元素的“name”属性为ID属性，则可以用如下CSS代码匹配具有“name="c12"”属性的“chapter”元素。
chapter#c12 {
font-size: 24pt;
color: red;
}
如果XML DTD被浏览器忽略，或XML文档没有DTD，则上述匹配形式将无效。为稳妥起见，应采用属性选择子匹配元素。
chapter[name="c12"] {
font-size: 24pt;
color: red;
}
腾讯云开发者
