總結CSS3新特性(選擇器篇)

CSS3新增了

嗯- -21個選擇器,腳本通過控制台在 這裡 運作;

~:

p ~ p {
    color : red;/*此條規則将用于p後邊所有的p...就是除了第一個p的所有p,規則同p:not(:nth-of-type(1)),但是權重要低于後者*/
}      

[attribute^=value]:

選擇該屬性以特定值開頭的元素

[attribute$=value]:

選擇該屬性以特定值結尾的元素

[attribute*=value]:

選擇該屬性中出現了特定值的元素

上邊三個是可以組合使用的,方法如 ↓ :

實際中可以應用在區分本地連結與外部連結,通過判斷是否有http\.com什麼的(等到CSS4選擇器問世就不用這麼麻煩了[:local-link])

:first-of-type與:last-of-type:

從字面大概能看出來是幹嘛使得,第一個這個類型的/最後一個這個類型的...

如上圖所示,每個元素内的第一個p與最後一個p都應用了該樣式;

:only-of-type:

選擇僅僅僅有一個此類型的子元素,不包含子元素的子元素;

可以利用:not來實作反選

:only-child:

選擇僅有一個子元素的元素;

如果去掉:only-child前邊的p,那個孤獨的span也會應用該樣式;

同樣可以使用:not反選,

簡單來說,就是有兄弟節點的p所應用該樣式;

:nth-child(n):

選擇第n個子元素,可以結合選擇器來限制

結合變量n(應該說是關鍵字吧= =),可以用來在表格裡,清單裡做隔行換色什麼的

:nth-last-child(n):

基本同上...隻不過是從後往前數

:nth-of-type(n):

這個跟上邊的讓我很蛋疼- -這兩者的差別一直讓人很淩亂,詳情看下圖

通過w3school上邊做的.

p:nth-child(2)将父元素中子元素第二個為p的p的顔色設為紅色,

p:nth-of-type(2)将子元素中的第二個p背景色設為綠色- -好亂的;

我認為兩者的卻别在于,nth-of-type計數過濾标簽類型,而nth-child計數不過濾;

:nth-last-of-type(n):

這個不做解釋了...反之

:last-child:

選取父元素中最後一個子元素

注意tr後邊僞類的位置,這就是一個空格的差距= =上邊那個選擇的是最後一個tr,而下邊那個是選擇的tr中的最後一個元素;

:root:

選擇文檔根節點- -相當于 html {},但是權重要比html高,因為人家是僞類,沾點類就比标簽高- -;

:empty:

選擇沒有子元素的标簽,額,這個一般沒什麼大用,因為文本節點也是節點,一般就是表格有空單元格,清單有空項,然後做點處理,用js選擇空元素時這個挺有用的;

:target:

W3C給的解釋是設定活動的id的樣式,其實就是浏覽器路徑上邊綴着#什麼,就選着什麼

傳送陣

;

:enabled與:disabled:

用于表單元素是否可用的僞類;

:enabled為可用,:disabled反之;

:checked:

用于多選及單選被選中的僞類;

:not:

這個就不多說了- -上邊用了那麼多了;

::selection:

被選中文本的樣式;

總結:

CSS3選擇器帶來了極大的便利,上文有什麼不對或不詳細,還請指出.有點虎頭蛇尾了,哈哈

部分參考連結:

http://www.w3school.com.cn/cssref/css_selectors.asp

再來幾個CSS4前瞻的

http://www.admin10000.com/document/5900.html http://www.webhek.com/css4-selectors/ http://www.iinterest.net/2011/10/09/css4-selectors-level-4/