CSS3選取器，css選取器

CSS3選取器，css選取器

基本選取器

1、萬用字元選取器（*）—所有瀏覽器支援

*{    marigin: 0;    padding: 0; }

2、元素選取器(E) —所有瀏覽器支援
3、類別選取器（.className） —所有瀏覽器支援
4、id選取器（#ID）—所有瀏覽器支援
5、後代選取器（Ｅ Ｆ）—所有瀏覽器支援

選擇了Ｅ元素的所有後代Ｆ元素，中間是一個空格；

6、子項目選取器(E>F)  —IE6不支援

選擇了Ｅ元素下的所有子項目Ｆ
7、相鄰兄弟元素選取器(E + F)  —IE6不支援

EF兩元素具有一個相同的父元素，而且Ｆ元素在Ｅ元素後面，而且相鄰；
8、通用兄弟選取器（Ｅ 〜 Ｆ） —IE6不支援

選擇某元素後面的所有兄弟元素

9、群組選取器（selector1,selector2,...,selectorN）—所有瀏覽器支援

每個選取器之間使用逗號“，”隔開

屬性選取器   IE6不支援

E[attr]：只使用屬性名稱，但沒有確定任何屬性值； 
E[attr="value"]：指定屬性名稱，並指定了該屬性的屬性值；
E[attr~="value"]：指定屬性名稱，並且具有屬性值，此屬性值是一個詞列表，並且以空格隔開，其中詞列表中包含了一個value詞，而且等號前面的“〜”不能不寫；

E[attr="value"]與E[attr~="value"]的區別：屬性選取器中有波浪（〜）時屬性值有value時就相匹配，沒有波浪（〜）時屬性值要完全是value時才匹配。

E[attr^="value"]：指定了屬性名稱，並且有屬性值，屬性值是以value開頭的；
E[attr$="value"]：指定了屬性名稱，並且有屬性值，而且屬性值是以value結束的；
E[attr*="value"]：指定了屬性名稱，並且有屬性值，而且屬值中包含了value；
E[attr|="value"]：指定了屬性名稱，並且屬性值是value或者以“value-”開頭的值（比如說zh-cn）;

偽類別選取器

1、動態偽類  對於:hover在IE6下只有a元素支援，:active只有IE6-7不支援，:focus在IE6-7下不被支援。

.demo a:link {color:gray;}/*連結沒有被訪問時前景色彩為灰色*/.demo a:visited{color:yellow;}/*連結被訪問過後前景色彩為黃色*/.demo a:hover{color:green;}/*滑鼠懸浮在連結上時前景色彩為綠色*/.demo a:active{color:blue;}/*滑鼠點中啟用連結那一下前景色彩為藍色*/

注意先後順序：愛恨原則LoVe/HAte,也就是Link--visited--hover--active；

還有一個 :focus 用於元素成為焦點，這個經常用在表單元素上。

2、UI元素狀態偽類   IE6-8不支援

":enabled",":disabled",":checked"  主要是針對於HTML中的Form元素操作

input[type="text"]:disabled {border:1px solid #999;background-color: #fefefe;}

3、CSS3的:nth選取器  

:first-child選擇某個元素的第一個子項目；
:last-child選擇某個元素的最後一個子項目；
:nth-child(n)選擇某個元素的一個或多個特定的子項目；  IE6-8和FF3-瀏覽器不支援":nth-child"選取器。

括弧裡的n可以是整數，運算式，關鍵詞；

整數：從1開始；如     :nth-child(3),選擇某元素下的第三個子項目；

運算式：如2n+1，n是從0開始； 這裡的n只能是n，不能改成其他字母代替；

關鍵詞：odd，even；

:nth-last-child()選擇某個元素的一個或多個特定的子項目，從這個元素的最後一個子項目開始算；
:nth-of-type()選擇指定的元素；

:nth-of-type類似於:nth-child；唯一不同的是這種指定了元素的類型而以；

:nth-last-of-type()選擇指定的元素，從元素的最後一個開始計算；
:first-of-type選擇一個上階項目下的第一個同類子項目；

:first-of-type和:last-of-type這兩個選取器就類似於:first-child和:last-child;不同之處就是指定了元素的類型。
:last-of-type選擇一個上階項目的最後一個同類子項目；
:only-child選擇的元素是它的父元素的唯一一個了元素；

":only-child"表示的是一個元素是它的父元素的唯一一個子項目
:only-of-type選擇一個元素是它的上階項目的唯一一個相同類型的子項目；
:empty選擇的元素裡面沒有任何內容。

:empty是用來選擇沒有任何內容的元素，這裡沒有內容指的是一點內容都沒有，哪怕是一個空格；

3、否定選取器（:not） IE6-8瀏覽器不支援

input:not([type="submit"]) {border: 1px solid red;}

4、虛擬元素

兩個“：：”和一個“：”css3中主要用來區分偽類和虛擬元素，到目前來說，這兩種方式都是被接受的，也就是說不管使用哪種寫法所起的作用都是一樣的，只是一個書寫格式不同而以。

::first-line選擇元素的第一行，比如說改變每個段落的第一行文本的樣式；

::first-letter選擇文字區塊的第一個字母，除非在同一行裡麵包含一些其它元素，不過這個主要運用於段落排版上多，比如說首字下沉；

::before和::after這兩個主要用來給元素的前面或後面插入內容，這兩個常用"content"配合使用，見過最多的就是清除浮動；

::selection 用來改變瀏覽網頁選中文的預設效果；

/*Webkit,Opera9.5+,Ie9+*/   ::selection {background: 顏色值；color:顏色值；   }   /*Mozilla Firefox*/   ::-moz-selection {background: 顏色值；color:顏色值；    }

“::selection”只能設定兩個屬性，一個就是background,另一個就是color屬性，設定其他屬性是沒有任何效果的。

參考：http://www.w3cplus.com/css3/basic-selectors