簡介：這是css中的選擇器的詳細(xì)頁面，介紹了和javascript,有關(guān)的知識、技巧、經(jīng)驗，和一些javascript源碼等。

css 中的選擇器
type selectors
universal selector
descendant selectors
child selectors
adjacent sibling selectors
attribute selectors
id selectors
class selectors
pseudo selectors
grouping

1.type selectors（類型選擇符）
語法：
e { srules }
說明：
類型選擇符。以文檔語言對象(element)類型作為選擇符。
示例：
td { font-size:14px; width:120px; }
a { text-decoration:none; }

2.universal selector（通配選擇符）
語法：
* { srules }
說明：
通配選擇符。選定文檔目錄樹(dom)中的所有類型的單一對象。
假如通配選擇符不是單一選擇符中的唯一組成，“*”可以省略。
示例：
*[lang=fr] { font-size:14px; width:120px; }
*.div { text-decoration:none; }

3.descendant selectors（包含選擇符）
語法：
e1 e2 { srules }
說明：
包含選擇符。選擇所有被 e1 包含的 e2 。即 e1.contains(e2)==true 。
示例：
table td { font-size:14px; } 
div.sub a { font-size:14px; }

4.child selectors（子對象選擇符）
語法：
e1 > e2 { srules }
說明：
子對象選擇符。選擇所有作為 e1 子對象的 e2 。
示例：
body > p { font-size:14px; }
/* 所有作為body的子對象的p對象字體尺寸為14px */ 
div ul>li p { font-size:14px; }

5.adjacent sibling selectors（相鄰選擇符）
語法：
e1 + e2 { srules }
說明：
相鄰選擇符。選擇緊貼在 e1 之后的所有 e2 。 e1 和 e2 在文檔目錄結(jié)構(gòu)樹(dom)中有共同的父對象。
示例：
div + p { font-size:14px; }
/* 所有緊貼在div對象之后的p對象的字體尺寸為14px */ 
div.fly + p { font-size:14px; }

6.attribute selectors（屬性選擇符）
語法：
e [ attr ] { srules }
e [ attr = value ] { srules }
e [ attr ~= value ] { srules }
e [ attr |= value ] { srules }
說明：
屬性選擇符。
選擇具有 attr 屬性的 e
選擇具有 attr 屬性且屬性值等于 value 的 e
選擇具有 attr 屬性且屬性值為一用空格分隔的字詞列表，其中一個等于 value 的 e 。這里的 value 不能包含空格
選擇具有 attr 屬性且屬性值為一用連字符分隔的字詞列表，由 value 開始的 e
示例：
h[title] { color: blue; }
/* 所有具有title屬性的h對象 */ 
span[class=demo] { color: red; } 
div[speed="fast"][dorun="no"] { color: red; } 
a[rel~="copyright"] { color:black; }

7.id selectors（id選擇符）
語法：
#id { srules }
說明：
id選擇符。以文檔目錄樹(dom)中作為對象的唯一標(biāo)識符的 id 作為選擇符。
示例：
#note { font-size:14px; width:120px;}

8.class selectors（類選擇符）
語法：
e.classname { srules }
說明：
類選擇符。在html中可以使用此種選擇符。其效果等同于e [ class ~= classname ] 。請參閱屬性選擇符( attribute selectors )。
在ie5+，可以為對象的 class 屬性(特性)指定多于一個值( classname )，其方法是指定用空格隔開的一組樣式表的類名。例如：<div class="class1 class2">。
示例：
div.note { font-size:14px; }
/* 所有class屬性值等于（包含）"note"的div對象字體尺寸為14px */

.dream { font-size:14px; }
/* 所有class屬性值等于（包含）"note"的對象字體尺寸為14px */

9.pseudo selectors（偽類及偽對象選擇符）
語法：
e : pseudo-classes { srules }
e : pseudo-elements { srules }
說明：
偽類及偽對象選擇符。
偽類選擇符。附錄1。
偽對象選擇符。附錄2。
示例：
div:first-letter { font-size:14px; }
a.fly :hover { font-size:14px; color:red; }

10.grouping（選擇符分組）
語法：
e1 , e2 , e3 { srules }
說明：
選擇符分組。將同樣的定義應(yīng)用于多個選擇符，可以將選擇符以逗號分隔的方式并為組。
示例：
.td1,div a,body { font-size:14px; }
td,div,a { font-size:14px; }

附錄1（偽類選擇符）
:link
語法：
selector : link { srules }
說明：
設(shè)置 a 對象在未被訪問前的樣式。
默認(rèn)值由瀏覽器決定。
對于無 href 屬性(特性)的 a 對象，此偽類不發(fā)生作用。
請參閱 body 對象的 link 屬性(特性)和 document 對象的 linkcolor 特性。
ie3將 :link 偽類的樣式表屬性作用于 visited 偽類。
示例：
a:link { font-size: 14pt; text-decoration: underline; color: blue; }

:hover
語法：
selector : hover { srules }
說明：
設(shè)置對象在其鼠標(biāo)懸停時的樣式。
在css1中此偽類僅可用于 a 對象。對于無 href 屬性(特性)的 a 對象，此偽類不發(fā)生作用。
在css2中此偽類可以應(yīng)用于任何對象。
示例：
a:hover { font-size: 14pt; text-decoration: underline; color: blue; }
a:hover span{ color:red; }

:active
語法：
selector : active { srules }
說明：
設(shè)置對象在被用戶激活(在鼠標(biāo)點擊與釋放之間發(fā)生的事件)時的樣式。
在css1中此偽類僅可用于 a 對象。對于無 href 屬性(特性)的 a 對象，此偽類不發(fā)生作用。
在css2中此偽類可以應(yīng)用于任何對象。
并且 :active 可以和 :link 以及 :visited 狀態(tài)同時發(fā)生。

:visited
語法：
selector : visited { srules }
說明：
設(shè)置 a 對象在其鏈接地址已被訪問過時的樣式。
ie3將 :link 偽類的樣式表屬性作用于 :visited 偽類。
默認(rèn)值由瀏覽器決定。定義網(wǎng)頁過期時間或用戶清空歷史記錄將影響此偽類的作用。
對于無 href 屬性(特性)的 a 對象，此偽類不發(fā)生作用。
請參閱 body 對象的 vlink 屬性(特性)和 document 對象的 vlinkcolor 特性。
示例：
a:visited { font-size: 14pt; text-decoration: underline; color: blue; }

:focus
語法：
selector : focus { srules }
說明：
設(shè)置對象在成為輸入焦點(該對象的 onfocus 事件發(fā)生)時的樣式。
示例：
a:focus { font-size: 14pt; text-decoration: underline; color: blue; }
a:focus img { border: thin solid green }

:first-child
語法：
selector : first-child { srules }
說明：
設(shè)置 e 的第一個子對象的樣式。
示例：
p a:first-child { color: green }
table td:first-child { width:200px; }

:first
語法：
selector : first { srules }
說明：
設(shè)置頁面容器第一頁使用的樣式。僅用于 @page 規(guī)則。
示例：
@page :first { margin: 4cm }

:left
語法：
selector : left { srules }
說明：
設(shè)置頁面容器位于裝訂線左邊的所有頁面使用的樣式。僅用于 @page 規(guī)則。
示例：
@page :left { margin: 4cm }

:right
語法：
selector : right { srules }
說明：
設(shè)置頁面容器位于裝訂線右邊的所有頁面使用的樣式。僅用于 @page 規(guī)則。
示例：
@page :right { margin: 4cm }

:lang
語法：
selector : lang { srules }
說明：
設(shè)置對象使用特殊語言的內(nèi)容的樣式。
示例：
blockquote:lang(fr) { quotes: '?' ' ?' }
/* 使用法語顯示由quotes屬性指定的法語的嵌套標(biāo)記 */


附錄2（偽對象選擇符）
:first-letter
語法：
selector : first-letter { srules }
說明：
設(shè)置對象內(nèi)的第一個字符的樣式。
此偽對象僅作用于塊對象。內(nèi)聯(lián)要素要使用該屬性，必須先設(shè)定對象的 height 或 width 屬性，或者設(shè)定 position 屬性為 absolute ，或者設(shè)定 display 屬性為 block 。

在此偽對象中配合使用 font-size 屬性和 float 屬性可以制作首字下沉效果。
示例：
p a:first-letter { color: green }
div:first-letter { color:red;font-size:16px;float:left; }

:first-line
語法：
selector : first-line { srules }
說明：
設(shè)置對象內(nèi)的第一行的樣式。
此偽對象僅作用于塊對象。內(nèi)聯(lián)要素要使用該屬性，必須先設(shè)定對象的 height 或 width 屬性，或者設(shè)定 position 屬性為 absolute ，或者設(shè)定 display 屬性為 block 。
如果未強(qiáng)制指定對象的 width 屬性， 首行的內(nèi)容長度可能不是固定的。
示例：
p a:first-line { color: green }
div:first-line { color:red;font-size:16px; }

:before
語法：
selector : before { srules }
說明：
用來和 content 屬性一起使用，設(shè)置在對象前(依據(jù)對象樹的邏輯結(jié)構(gòu))發(fā)生的內(nèi)容。
示例：
em:before { content: url("ding.wav"); }

:after
語法：
selector : after { srules }
說明：
用來和 content 屬性一起使用，設(shè)置在對象后(依據(jù)對象樹的邏輯結(jié)構(gòu))發(fā)生的內(nèi)容。
示例：
table:after { content: end of table }