css3新增選擇器有什么

發(fā)布時間：2021-04-09 09:48:50 來源：億速云閱讀：165 作者：啵贊欄目：web開發(fā)

這篇文章主要講解了“css3新增選擇器有什么”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“css3新增選擇器有什么”吧！

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

css3新增選擇器有什么

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

css3新增的選擇器

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

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

E[att$="val"] 屬性att的值以"val"結(jié)尾的元素

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

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

結(jié)構(gòu)偽類選擇器（過濾選擇器）

（注：FireFox 1.5/2.0/3.0 支持E:root，F(xiàn)ireFox 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)	匹配其父元素的倒數(shù)第n個子元素，第一個編號為1	p:last-child { background:#ff0; }
4	E:nth-of-type(n)	與:nth-child()作用類似，但是僅匹配使用同種標(biāo)簽的元素	p:nth-of-type(2){color:red;}選擇父元素的第n個子元素p
5	E:nth-last-of-type(n)	與:nth-last-child() 作用類似，但是僅匹配使用同種標(biāo)簽的元素
6	E:last-child	匹配父元素的最后一個子元素，等同于:nth-last-child(1)
7	E:first-of-type	匹配父元素下使用同種標(biāo)簽的第一個子元素，等同于:nth-of-type(1)
8	E:last-of-type	匹配父元素下使用同種標(biāo)簽的最后一個子元素，等同于:nth-last-of-type(1)
9	E:only-child	匹配父元素下僅有的一個子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)	p:only-child { background:#ff0; }
10	E:only-of-type	匹配父元素下使用同種標(biāo)簽的唯一一個子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
11	E:empty	匹配一個不包含任何子元素的元素，注意，文本節(jié)點也被看作子元素	p:empty { background:#ff0; }

UI狀態(tài)偽類選擇器（IE6/7/8不支持）

序號	選擇器	含義	實例
1	E:enabled	匹配表單中激活的元素
2	E:disabled	匹配表單中禁用的元素	input[type="text"]:disabled { background:#ddd; }
3	E:checked	匹配表單中被選中的radio（單選框）或checkbox（復(fù)選框）元素
4	E::selection	匹配用戶當(dāng)前選中的元素

級元素通用選擇器

序號	選擇器	含義	實例
1	E ~ F	匹配任何在E元素之后的同級F元素	p ~ ul { background:#ff0; }

反選偽類

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

：target偽類

序號	選擇器	含義	實例
1	E:target	匹配文檔中特定"id"點擊后的效果

感謝各位的閱讀，以上就是“css3新增選擇器有什么”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對css3新增選擇器有什么這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！

向AI問一下細(xì)節(jié)

猜你喜歡