首頁  >  文章  >  web前端  >  css3新增選擇器有哪些

css3新增選擇器有哪些

青灯夜游
青灯夜游原創
2021-04-08 19:10:064187瀏覽

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

css3新增選擇器有哪些

本教學操作環境: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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn