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不支持,所以選擇合適的場景用吧)
序號 | 選擇器 | 意思 | 實例 | ||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
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 | ##E:last-child符合父元素的最後一個子元素,等同於:nth-last-child(1) | ||||||||||||||||||
E: first-of-type | 符合父元素下使用同種標籤的第一個子元素,等同於:nth-of-type(1) | ||||||||||||||||||
E:last-of-type | 符合父元素下使用同種標籤的最後一個子元素,等同於:nth-last-of-type( 1) | ||||||||||||||||||
E:only-child | #符合父元素下僅有的一個子元素,等同於:first-child:last-child或:nth-child(1):nth-last-child(1) | p:only-child { background:#ff0; } | |||||||||||||||||
E:only-of-type | 符合父元素下使用同種標籤的唯一一個子元素,等同於:first-of-type:last -of-type或:nth-of-type(1):nth-last-of-type(1) | # | |||||||||||||||||
E:empty | 符合一個不包含任何子元素的元素,注意,文字節點也被看作子元素 | p:empty { background:#ff0; } |
序號 | 選擇器 | 意思 | 實例 |
---|---|---|---|
#E :enabled | 符合表單中啟動的元素 | ||
E:disabled | 符合表單中禁用的元素 | input[type="text"]:disabled { background:#ddd; } | |
E:checked | 符合表單中被選取的radio(單選方塊)或checkbox(複選框)元素 | ||
E::selection | 符合使用者目前選取的元素 |
選擇器 | 意義 | 實例 | |||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
E ~ F | 符合任何在E元素之後的同級F元素 | p ~ ul { background:#ff0; } | ## |
#序號 | 選擇器 | #意思 | 實例 |
---|---|---|---|
1 | E:not(s) | 匹配不符合當前選擇器的任何元素 | :not(p) { border:1px solid #ccc; } |
:target偽類
以上是css3新增選擇器有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章!