本節簡單地介紹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;
}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
