css3新增選擇器有哪些

css3選擇器有：「[att^="val"]」、「[att$="val"]」、「[att*="val"]」、「:root」、「 :nth-child(n)」、「:last-child」、「:only-child」、「:empty」等等。

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

css3新增的選擇器

#屬性選擇器（除IE6外的大部分瀏覽器支援）

       E[att^="val"]  屬性att的值以"val"開頭的元素

# E[att$="val"]  屬性att的值以"val"結尾的元素

       E#[att*="val "]  屬性att的值包含"val"字串的元素

       #實例：p [id^="nav"] {background:#000;}

結構偽類別選擇器 （過濾選擇器）

（註：FireFox 1.5/2.0/3.0 支援E:root，FireFox 3.0支援E:last-child、E:empty，由於IE6/ 7/8不支持，所以選擇合適的場景用吧）

##E:last-child符合父元素的最後一個子元素，等同於:nth-last-child(1) 7E: first-of-type符合父元素下使用同種標籤的第一個子元素，等同於:nth-of-type(1) 8E:last-of-type符合父元素下使用同種標籤的最後一個子元素，等同於:nth-last-of-type( 1) 9E:only-child#符合父元素下僅有的一個子元素，等同於:first-child:last-child或:nth-child(1):nth-last-child(1)p:only-child { background:#ff0; }#10E:only-of-type符合父元素下使用同種標籤的唯一一個子元素，等同於:first-of-type:last -of-type或:nth-of-type(1):nth-last-of-type(1)# 11 E:empty符合一個不包含任何子元素的元素，注意，文字節點也被看作子元素p:empty { background:#ff0; }

UI狀態偽類選擇器（IE6/7/8不支援）

序號	選擇器	意思	實例
1	E:root	符合文檔的根元素，對於HTML文檔，就是HTML元素	#
2	E:nth-child(n)	符合其父元素的第n個子元素，第一個編號為1	p:nth-child(3) { color:#f00 ; }
3	E:nth-last-child(n)	符合其父元素的倒數第n個子元素，第一個編號為1	p:last-child { background:#ff0; }
#4	E:nth-of-type(n )	與:nth-child()作用類似，但只符合使用同種標籤的元素	p:nth-of-type(2){color:red;}選擇父元素的第n個子元素p
5	E:nth-last-of-type(n)	#與:nth- last-child() 作用類似，但只符合使用同種標籤的元素
#6

##1#E :enabled符合表單中啟動的元素 #2E:disabled符合表單中禁用的元素input[type="text"]:disabled { background:#ddd; }##34

序號	選擇器	意思	實例
E:checked	符合表單中被選取的radio（單選方塊）或checkbox（複選框）元素
E::selection	符合使用者目前選取的元素

等級元素通用選擇器

序號1 ##

反選偽類別

選擇器	意義	實例
E ~ F	符合任何在E元素之後的同級F元素	p ~ ul { background:#ff0; }

#序號	選擇器	#意思	實例
1	E:not(s)	匹配不符合當前選擇器的任何元素	:not(p) { border:1px solid #ccc; }

：target偽類

#選擇器

意義實例

#########1#########E:target######## #####符合文件中特定"id"點擊後的效果######### ################（學習影片分享：###css視頻教程###）###

以上是css3新增選擇器有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章！