本文详解 CSS 级联样式表的基本语法、选择器优先级及动态修改方法，并深入讲解 XML 数据格式规范。重点对比 Internet Explorer 与 Firefox 浏览器在解析 XML 时的差异，演示如何利用 ActiveXObject 和 XPathEvaluator 实现跨浏览器的数据读取与节点定位。
CSS 基础与优先级
CSS 全称为 Cascading Style Sheets，中文译作级联样式表或层叠样式表。其核心优势在于能够使代码结构更加清晰整洁，并支持对页面样式进行批量统一处理。
CSS 的基本语法规范如下：
注释符号采用 /* */ 形式。
选择符语法结构为 selector {attribute:value}。同一属性内的多个值以空格分隔，不同属性之间则以分号分隔。需注意 CSS 语法严格区分大小写。
例如，若需为页面中的 table 元素定制特定样式，代码应写为 table {.....;.....;}。
选择符的使用方式多样，此处列举部分常见用法，具体细节将在后续章节详细解释。
| 选择符模式 | 说明 |
| * | 匹配任意元素。(通用选择器) |
| E | 匹配任意元素 E (例如一个类型为 E 的元素)。(类型选择器) |
| E F | 匹配元素 E 的任意后代元素 F 。(后代选择器) |
| E > F | 匹配元素 E 的任意子元素 F 。(子选择器) |
| E:first-child | 当元素 E 是它的父元素中的第一个子元素时，匹配元素 E 。(:first-child 伪类) |
| E:link E:visited | 如果 E 是一个目标还没有访问过(:link)或者已经访问过(:visited)的超链接的源锚点时匹配元素 E 。(link 伪类) |
| E:active E:hover E:focus | 在确定的用户动作中匹配 E 。(动态伪类) |
| E:lang(c) | 如果类型为 E 的元素使用了(人类)语言 c (文档语言确定语言是如何被确定的)，则匹配该元素。(:lang() 伪类) |
| E + F | 如果一个元素 E 直接在元素 F 之前，则匹配元素 F 。(临近选择器) |
| E[attr] | 匹配具有”attr”属性集(不考虑它的值)的任意元素 E 。(属性选择器) |
| E[attr="warning"] | 匹配其“attr”属性值严格等于“warning”的任意元素 E 。(属性选择器) |
| E[attr~="warning"] | 匹配其“attr”属性值为空格分隔的值列表，并且其中一个严格等于“warning”的任意元素 E 。(属性选择器) |
| E[lang|="en"] | 匹配其“lang”属性具有以“en”开头(从左边)的值的列表的任意元素 E 。(属性选择器) |
| DIV.warning | 仅 HTML。用法同 DIV[class~="warning"]。(类选择器) |
| E#myid | 匹配 ID 等于“myid”的任意元素 E 。(ID 选择器) |
实际应用中再对选择符进行详细解析。
在同一个页面或 CSS 文件中，若对同一元素存在多重样式定义，浏览器需依据优先级规则进行渲染。优先级主要划分为外部定义样式优先级与其他样式优先级两类。
关于外部定义样式的优先级算法此处省略，直接给出结果：ID 选择符 > 类选择符 > 属性选择符 > 伪类选择符 > 元素选择符 > 伪元素选择符 > 全局选择符 > 其他。
其他样式的优先级排序中，文内样式（即元素内部的 style=...）具有最高优先级，高于所有外部定义样式。关于 !important 在不同浏览器版本中的用法存在差异，此处不作深入展开，建议查阅相关文档。通过继承获得的样式优先级最低。
CSS 属性参考链接：https://www.jb51.net/w3school/css/css_reference.htm
CSS 单位参考链接：https://www.jb51.net/w3school/css/css_units.htm
忽略上述链接。
接下来进入 CSS 实际应用环节。
CSS 样式嵌入与动态修改
1. 在当前页面内嵌入 CSS 样式：
具体代码如下：
<html>
<head>
<title>css test</title>
<style>
.tableStyle{
background:yellow;
font-size:14px;
font-weight:bold;
}
</style>
</head>
<body>
<table width="400" align="center" class="tableStyle">
<tr>
<td>title:</td>
<td><input type="text" name="title" size="50"></td>
</tr>
<tr>
<td>content:</td>
<td><textarea name="content" class="userData" cols="45" rows="10"></textarea></td>
</tr>
</table>
</body>2. 嵌入外部 CSS 样式文件：
在工程目录下新建 css 文件夹，并创建名为 style.css 的文件。此举旨在保持代码整洁，示例中仅包含前述案例的样式内容。
CSS 文件代码如下：
.tableStyle{
background:yellow;
font-size:14px;
font-weight:bold;
border:1px solid #000000引用外部样式文件十分简便，只需在 HTML 中添加一行代码：
<link rel="stylesheet" type="text/css" href="css/style.css" />
其中 rel 属性指定引入的是 CSS 样式表文件，type 属性指定文件类型，href 属性指定文件的物理路径。
3. 动态修改 CSS 样式。
此时开始涉及 JavaScript 与 CSS 的结合。
修改样式的方法主要是获取元素并修改其属性。值得注意的是，link 标签的属性同样可以被修改。
例如，为 link 标签设置 id 为 myStyle，然后修改其导入的文件路径，具体方法如下：
代码如下：
<link rel="stylesheet" id="myStyle" type="text/css" href="css/style.css">
<script type="text/javascript">
//在javascript中修改时：
var styleObj=document.getElementById("myStyle");
styleObj.styleSheet.cssText="";//清除原有样式
styleObj.styleSheet.addImport("css/style2");
</script>XML 规范与 XPath 应用
接下来开始介绍 XML 部分。
忽略无关内容。
若需深入学习 XML 可单独开设系列课程，此处仅作简要概述。
XML 全称为 Extensible Markup Language，其存在旨在更灵活、广泛地描述数据。XML 的标签几乎全部由用户自定义。
例如存储书籍信息时，可采用不同的存储方式：
代码如下：
<book>
<name>.....</name>
<author>....</author>
<publisher>...</publisher>
</book>
<!-- or -->
<book>
<property name="name" value="....."/>
<property name="author" value="..."/>
<property name="publisher" value="...."/>.
</book>XML 还有几项严格规定：
必须包含声明语句 <?xml cersion="1.0"?>，其中可包含 encoding 等其他属性。
所有非根元素必须封闭，即必须包含 />。
属性值必须包含在引号内。
XML 区分大小写。
标记名称必须以字母、“_”或“:”开头，后续可跟随字母、数字、句点、冒号或下划线。
XML 文档只能有一个根节点。
XPath。
XPath 是一种用于在 XML 文件中查找并定位信息的语言，它可以遍历文档树中的元素和属性。
关于 XPath 的语法，此处仅做简要介绍。
XPath 语法详情见：https://www.jb51.net/w3school/xpath/xpath_syntax.htm
请大致浏览上述网页的“XPath 语法”、“XPath 轴”、“XPath 运算符”以及参考手册下的“XPath 函数”。
浏览完毕后，即可开始相关练习：
首先提供一个 XML 文件示例：
代码如下：
<!-- Copyright w3school.com.cn -->
<!-- W3School.com.cn bookstore example -->
<bookstore>
<book category="children">
<title lang="en">Harry Potter</title>
<author>J K. Rowling</author>
<year>2005</year>
<price>29.99</price>
</book>
<book category="cooking">
<title lang="en">Everyday Italian</title>
<author>Giada De Laurentiis</author>
<year>2005</year>
<price>30.00</price>
</book>
<book category="web" cover="paperback">
<title lang="en">Learning XML</title>
<author>Erik T. Ray</author>
<year>2003</year>
<price>39.95</price>
</book>
<book category="web">
<title lang="en">XQuery Kick Start</title>
<author>James McGovern</author>
<author>Per Bothner</author>
<author>Kurt Cagle</author>
<author>James Linn</author>
<author>Vaidyanathan Nagarajan</author>
<year>2003</year>
<price>49.99</price>
</book>
</bookstore>（内容源自网站，复制时请保留版权信息。）
跨浏览器 XML 数据读取实战
在 IE 和 Firefox 浏览器中的使用方法存在差异，这点较为繁琐。先介绍 IE 浏览器的实现方式：这段代码再次强调，script 标签应写在 table 之后，否则在编译 JavaScript 时，由于 table 尚未渲染，浏览器无法确定 innerText 的加载位置。完整代码如下供参考：
XML in IE
代码如下：
<html>
<head>
<title>xml test</title>
</head>
<body>
<table width="400" border="1px" align="center">
<tr>
<td width="30%">book name:</td>
<td><span id="bname"></span></td>
</tr>
<tr>
<td>book author:</td>
<td ><span id="bauthor"><span></td>
</tr>
</table>
<script type="text/javascript">
<!--
var xmldoc=new ActiveXObject("MSXML2.DOMDocument.3.0");
xmldoc.load("xml/books.xml");
var name=xmldoc.selectNodes("/bookstore/book/title");
var author=xmldoc.selectNodes("/bookstore/book/author");
var bname=document.getElementById("bname");
var bauthor=document.getElementById("bauthor");
bname.innerText=name[0].text;
bauthor.innerHTML="<p>"+author[0].text+"</p>";
//-->
</script>
</body>
</html>接下来介绍 Firefox 浏览器的实现方式：
代码如下：
<html>
<head>
<title>xml test</title>
</head>
<body>
<table width="400" border="1px" align="center">
<tr>
<td width="30%">book name:</td>
<td><span id="bname"></span></td>
</tr>
<tr>
<td>book author:</td>
<td ><span id="bauthor"><span></td>
</tr>
</table>
<script type="text/javascript">
<!--
var xmldoc=document.implementation.createDocument("","",null);
xmldoc.load("xml/books.xml")
//xmlDoc.evaluate(xpath, xmlDoc, namespace, XPathResult.ANY_TYPE,XPahrResult);
var evaluatorObj=new XPathEvaluator();
function getBookChild(path){
return evaluatorObj.evaluate(path,xmldoc.documentElement,null,
XPathResult.ORDERED_NODE_ITERATOR_TYPE,null);
}
var namelist=getBookChild("/bookstore/book/title");
var name=namelist.iterateNext();
var authorlist=getBookChild("/bookstore/book/author");
var author=authorlist.iterateNext();
var bname=document.getElementById("bname");
var bauthor=document.getElementById("bauthor");
bname.innerHTML=name.childNodes[0].nodeValue;
bauthor.innerHTML=author.childNodes[0].nodeValue
//-->
</script>
</body>
</html>Firefox 浏览器下读取 XML 资源的网络资料较少，经多次尝试未果后，通过调试发现 author.childNodes[0].nodeValue 这一句可获取节点值。
在 Firefox 浏览器中读取 XML 文件主要涉及两个类：XPathEvaluator 和 XPathResult。即使用 XPathEvaluator 进行查找，并在 XPathResult 中存储结果。代码中使用了 XPathEvaluator 查找部分，该 evaluate 函数参数众多，必须了解其用法，此处摘录他人内容（原内容见链接）：
函数：evaluate(xpathText,contextNode,namespaceURLMapper,resultType,result)
| 参数 | 描述 |
|---|---|
| xpathText | 表示要计算的 XPath 表达式的字符串。 |
| contextNode | 文档中，对应要计算的表达式的节点。 |
| namespaceURLMapper |
把一个命名空间前缀映射为一个全称命名空间 URL 的函数。 如果不需要这样的映射，就为 null。 |
| resultType |
指定了期待作为结果的对象的类型，使用 XPath 转换来强制结果类型。 类型的可能的值是 XPathResult 对象所定义的常量。 |
| result |
一个复用的 XPathResult 对象； 如果你要创建一个新的 XPathResult 对象，则为 null。 |
注意，resultType 有多种参数值，继续摘录：
| 返回类型 | 说明 |
| ANY_TYPE | 把这个值传递给 Document.evaluate() 或 XPathExpression.evaluate() 来指定可接受的结果类型。属性 resultType 并不设置这个值。 |
| NUMBER_TYPE | numbervalue 保存结果。 |
| STRING_TYPE | stringvalue 保存结果。 |
| BOOLEAN_TYPE | booleanValue 保存结果。 |
| UNORDERED_NODE_ITERATOR_TYPE | 这个结果是节点的无序集合，可以通过重复调用 iterateNext() 直到返回 null 来依次访问。在此迭代过程中，文档必须不被修改。 |
| ORDERED_NODE_ITERATOR_TYPE | 结果是节点的列表，按照文档中的属性排列，可以通过重复调用 iterateNext() 直到返回 null 来依次访问。在此迭代过程中，文档必须不被修改。 |
| UNORDERED_NODE_SNAPSHOT_TYPE | 结果是一个随机访问的节点列表。snapshotLength 属性指定了列表的长度，并且 snapshotItem() 方法返回指定下标的节点。节点可能和它们出现在文档中的顺序不一样。既然这种结果是一个“快照”，因此即便文档发生变化，它也有效。 |
| ORDERED_NODE_SNAPSHOT_TYPE | 这个结果是一个随机访问的节点列表，就像 UNORDERED_NODE_SNAPSHOT_TYPE，只不过这个列表是按照文档中的顺序排列的。 |
| ANY_UNORDERED_NODE_TYPE | singleNodeValue 属性引用和查询匹配的一个节点，如果没有匹配的节点则为 null。如果有多个节点和查询匹配，singleNodeValue 可能是任何一个匹配节点。 |
| FIRST_ORDERED_NODE_TYPE | singleNodeValue 保存了文档中的第一个和查询匹配的节点，如果没有匹配的节点，则为 null。 |
（虽然是摘录，但复制过程也不轻松=w=）
除此之外，XML 文件节点还可以增加条件，例如仅获取第一个符合条件的节点：
/bookstore/book[1]/title
或者价格高于 35 的节点：
/bookstore/book[price>35]/price
之前的例子未使用条件选取，旨在演示返回所有子节点的效果，这通常是常用做法。
此处提及一个概念 XSLT，全称是 Extensible Stylesheet Language Transformations，这是一种用于转换 XML 文件的语言。XSLT 借用 XPath 在 XML 文档中查找信息，可将 XML 文件中的内容按指定样式显示为 HTML 页面。
具体有兴趣的同学可自行查阅，此处不再深入。
XML 数据岛概念
终于，介绍 XML 的最后一个概念：数据岛。
数据岛指页面包含 XML 数据信息，与 CSS 类似，可以内部嵌入，方法为 <xml>......</xml>，也可以外部引入：<xml src="xml/books.xml"></xml>。
XML 数据岛的数据与 HTML 标签的绑定通过 datasrc 和 datafld 完成，但尝试多次后未能找到可运行的代码，故暂时搁置，待代码完善后再行补充。