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/

更多專業前端知識，請上 【猿2048】www.mk2048.com 創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的总结CSS3新特性(选择器篇)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。