以前看jQuery的時候一直看不懂，為什麼$()這個Factory 方法能做那麼多事， 裡面對DOM的選擇功能太強大了！今天看了《CSS入門經典》這本書，原來CSS本身就有這麼多選取器，之前看jQuery的代碼，一直沒搞明白jQuery怎麼解析裡面的參數。從中總結了一個經驗：基礎不好不要去看那些架構，越看越糊塗。
言歸正傳：
1, 類別選取器
.planet{
position: absolute;
top:0;
left:0;
bottom:15px;
}
用一個點開頭，後面接類名本身，類名不能有空格
在分頁檔中，假設有這麼一段：
<div class="planet"> this is a class Demo</div>
樣式表中的屬性就會應用到這段div中
在樣式表中也可以這樣寫：
div .planet{
position: absolute;
top:0;
left:0;
bottom:15px;
}
對一個標籤應用多個class可以這樣寫：
<div class="class1 class2"></div>
中間用一個空格隔開。
2，ID選取器
#planet{
position: absolute;
top:0;
left:0;
bottom:15px;
}ID選取器以#開頭，接ID的名稱，在每個文檔中ID應該只定義一次，所以ID選擇符具有唯一性。
Demo：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>Class and ID Selectors</title>
<link rel="stylesheet" type="text/css" href="classAndId.css" />
</head>
<body>
<p class="container">
PMS是隨著工業化生產由“生產”為中心轉變為“消費者”為中心而產生的，對企業來說，
根本目的就是在資源有限的情況下生產出“適銷對路”的產品，並保持長久的盈利和發展。
</p>
<p class="container box">
PMS是隨著工業化生產由“生產”為中心轉變為“消費者”為中心而產生的，對企業來說，
根本目的就是在資源有限的情況下生產出“適銷對路”的產品，並保持長久的盈利和發展。
</p>
<p class="container tank">
PMS是隨著工業化生產由“生產”為中心轉變為“消費者”為中心而產生的，對企業來說，
根本目的就是在資源有限的情況下生產出“適銷對路”的產品，並保持長久的盈利和發展。
</p>
<p class="container" id="container-1234">
PMS是隨著工業化生產由“生產”為中心轉變為“消費者”為中心而產生的，對企業來說，
根本目的就是在資源有限的情況下生產出“適銷對路”的產品，並保持長久的盈利和發展。
</P>
</body>
</html>css：
body{
font-family: sans-self;
}
p.container{
border:1px solid rgb(29,179,82);
background:rgb(202,222,245);
padding:10px;
width:245px;
height:245px;
float:left;
margin:10px;
}
p.box{
border:1px solid rgb(69,199,115);
background:rgb(164,201,245);
}
p.tank{
border:1px solid rgb(107,214,145);
background:rgb(124,180,245);
clear:left;
}
p#container-1234{
border:1px solid rgb(154,232,181);
background:rgb(82,157,245);
}
結果：
3，通用選取器
很簡單：*，這就是通用選取器
*{
border:1px solid black;
}
4，後代選取器
後代選取器是基於一個元素是否是另一個元素的後代來決定是否應用樣式。
在CSS中，“後代”表示一個元素是另一個元素的兒子、孫子、曾孫等，淺顯一點就是在代碼中：裡層的元素是外層元素的後代。
在樣式表中，選取器之間的空格表示祖先與後代的關係，祖先在前，後代在後。
以上表示：在文檔中有個ID為body的div，對這個div中一個類名為inline-code的span應用樣式：
font-family:monospace
以上選取器可以應用
<body>
<div id="body">
<span class="inline-code">
</span>
</div>
</body>
也可以應用於：
<body>
<div id="body">
<div>
<span class="inline-code">
</span>
<div>
</div>
</body>
5，直接子選取器
直接子選取器與後代選取器很相似，不同在於直接子選取器只應用與元素的直接子項目
用一個“>”相隔
也可以根據需要加入任意多個元素到直接子選取器鏈中
也可以與後代選取器混合使用
6，相鄰選取器
相鄰選取器選擇的是一個元素的下一個元素，中間用一個“+”相隔
h1 + p{
background:lightyellow;
color:darkkhaki;
border:1px solid darkkhaki;
}
h1 + p + p{
background:yellowgreen;
color:green;
border:1px solid green;
}第一個選擇的是：直接跟在<h1>元素後的<p>元素
第二個選擇的是：一個<p>元素直接相鄰於另一個<p>元素，並且後者也直接相鄰於一個<h1>元素。
完整的一個例子：
body{
font:12px sans-serif;
}
p{
padding:5px;
}
h1 + p{
background:lightyellow;
color:darkkhaki;
border:1px solid darkkhaki;
}
h1 + p + p{
background:yellowgreen;
color:green;
border:1px solid green;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>相鄰選取器</title>
<link rel="stylesheet" type="text/css" href="SiblingSelector.css"/>
</head>
<body>
<h1>
Next Sibling Selectors
</h1>
<p>Ajax用於描述存在已久的技術：JavaScript代碼、XML、以及能夠通過HTTP進行非同步呼叫的對象。Ajax常用於避免提交並重新載入整個網頁，特別是在使用者執行的動作不需要重新載入整個網頁時。
在過去幾年中，支援Ajax的網站在不斷的完善，作為此類網站的開發工具，Ajax的應用也越來越廣泛。使用本文的實踐通過Ajax和JavaScript來構建更優的Web應用程式 本文連結http://www.cxybl.com/html/wyzz/CSS/20121128/34564.html
