| 選擇符模式 | 說明 |
| * | 匹配任意元素。(通用選取器) |
| 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 。(識別碼選取器) |
用到的時候再詳細解釋吧。
CSS優先順序：同一個頁面或者css檔案裡，有時候會對同一個元素有多個定義，這就需要根據優先順序來渲染了。優先順序分為 外部定義樣式的優先順序與其他樣式的優先順序。
外部定義樣式的優先順序：具體怎麼演算法就不說了，這裡單純說結果：id選擇符>類選擇符>屬性選擇符>偽類選擇符>元素選擇符>虛擬元素選擇符>全域選擇符>其他
其他樣式定義的優先順序：文內樣式，也就是在元素裡面的style=...，這個是最最進階的，優先於所有的外部定義樣式。"!important" 這個在不同版本用法有偏差，也就不具體說了，需要的時候查吧。通過繼承得到的樣式：這個是優先順序最低的樣式。
CSS屬性：請參考http://www.jb51.net/w3school/css/css_reference.htm (喂這也太不負責了吧！摔)
CSS單位: http://www.jb51.net/w3school/css/css_units.htm (博主你簡直就是個廢柴啊！摔！)
(假裝沒聽見)
下面來進入應用環節 (￣︶￣)
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檔案夾，然後建立一個css檔案，取名為style.css。這樣做是為了代碼能整齊，當然因為這裡只是個例子於是裡面的內容我唯寫了剛才例子裡的東西。
複製代碼 代碼如下:.tableStyle{
background:yellow;
font-size:14px;
font-weight:bold;
border:1px solid #000000
引用的時候也很容易，只需要加一行：
<link rel="stylesheet" type="text/css" href="css/style.css" />
rel指定加入的是css樣式表檔案，type指定檔案類型，href則是檔案的物理地址。
3 動態修改css樣式。
終於，跟js扯上關係了。
這個修改的方法無外乎取到元素然後修改屬性。要提的一點是，link的屬性也可以修改。
比如：寫一個link的id是myStyle，然後修改它的匯入檔案，方法是這樣的： 複製代碼 代碼如下:<link rel="stylesheet" id="myStyle" type="text/css" href="css/style.css">
<script tyle="text/javascript">
//在javascript中修改時：
var styleObj=document.getElementById("myStyle");
styleObj.styleSheet.cssText="";//清除原有樣式
styleObj.styleSheet.addImport("css/style2");
</script>
好的接下來開始XML部分
（博主你的節操呢？！！）
xml如果真要詳細學可以再開一個系列了。。於是，我們這裡就是簡約的說一下。
xml的全稱是：extensible markup language，它的存在時為了更好的，更靈活而廣泛的描述資料。他的標籤幾乎全部可以由使用者定義。
比如我們要儲存一個關於書的資訊，可以有不同的儲存方式： 複製代碼 代碼如下:<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以外的元素都必須是封閉的，也就是必須要有/>
屬性值必須包含在引號裡。
區分大小寫
標記名字以字母。“_”，“:”開頭，後面可以跟字母，數字，句點，冒號，底線。
只有一個根節點。
XPath
XPath是用來在XML檔案中尋找資訊並且定位的語言。它可以遍曆樹中的元素和屬性。
數是什麼大家都懂的，其實說到這裡也就是講講xpath的文法而已。
關於xpath的文法請看http://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>
（從網站copy來的，複製請保留許可權。）
在IE和FF中的使用稍有不同，這點比較麻煩，先來IE的：這段代碼中再次重申：script寫在table後面，否則它在編譯js的時候，不知道那句innerText該往哪裡載入，因為還沒有渲染到table的地方。完整代碼如下做參考：
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>
接下來是FF的： 複製代碼 代碼如下:<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>
xml在FF中的讀取網上的資源很少，我找了好多也沒找到可以讀到結點值的，於是我用debug在ff瀏覽器下觀察了好久，終於找到了 author.childNodes[0].nodeValue 這一句。
XML檔案在firefox瀏覽器下的讀取主要有兩個類實現，一個是XPathEvaluator, XPathResult。其實就是用XPathEvaluator尋找，然後在XPathResult裡儲存尋找結果。可以看到My Code裡用XPathEvaluator尋找的部分，那個函數evaluate的參數非常多，但是必須要瞭解這個函數才行，摘取下別人的東西（原內容點這裡）：
函數：evaluate(xpathText,contextNode,namespaceURLMapper,resultType,result)
| 參數 | 描述 |
|---|---|
| xpathText | 表示要計算的 XPath 運算式的字串。 |
| contextNode | 文檔中，對應要計算的運算式的節點。 |
| namespaceURLMapper | 把一個命名空間首碼映射為一個全稱命名空間 URL 的函數。 如果不需要這樣的映射，就為 null。 |
| resultType | 指定了期待作為結果的對象的類型，使用 XPath 轉換來強制結果類型。 類型的可能的值是 XPathResult 對象所定義的常量。 |
| result | 一個複用的 XPathResult 對象； 如果你要建立一個新的 XPathResult 對象，則為 null。 |
注意，resultTypt有很多種參數值，繼續抄來：
| 傳回型別 | 說明 |
| 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，這是一個用來轉換xml檔案的語言，全稱是：extensible stylesheet language transformation。XSLT借用XPath在xml文檔中尋找資訊，它可以將xml檔案中存放的內容按照指定樣式顯示為html頁面。
具體有興趣的同學可以查查看，反正我是沒興趣。。╮(╯▽╰)╭
終於，到了xml的最後一個概念：資料島
其實就是指頁麵包含了xml資料資訊，跟css一樣，可以內部鑲嵌，辦法就是<xml>......</xml> 也可以外部引入：<xml src="xml/books.xml"></xml>
xml資料島的資料與html標籤的綁定，通過datasrc, datafld來完成，但是我試來試去也沒有一個代碼能運行，於是就暫時這樣吧，等我把代碼弄好再回來補充好了。
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
