CSS3結(jié)構(gòu)性偽類選擇器九種寫法
發(fā)布時間:2012-04-18 13:50:20 作者:佚名
我要評論

今天說說九個CSS3結(jié)構(gòu)性偽類選擇器
一、X:nth-child(n)
Example Source Code : li:nth-child(3) { color: red; } |
:nth-child(n),用于匹配索引值為n的子元素。索引值從1開始。
X:nth-child()用法實際上有三種變化,demo的用法是最簡單的,X:nth-child()更強大的用處在于奇偶匹配,明河不展開講,有興趣的請看《Understanding :nth-child Pseudo-class Expressions》,《CSS3 :nth-child()偽類選擇器》
二、X:nth-last-child(n)
Example Source Code : li:nth-last-child(2) { color: red; } |
三、X:nth-of-type(n)
Example Source Code: ul:nth-of-type(3) { border: 1px solid black; } |
四、X:nth-last-of-type(n)
Example Source Code : ul:nth-last-of-type(3) { border: 1px solid black; } |
五、X:first-child
Example Source Code: ul li:first-child { border-top: none; } |
六、X:last-child
Example Source Code : ul > li:last-child { color: green; } |
留意IE8支持:first-child,但不支持:last-child。
七、X:only-child
Example Source Code: div p:only-child { color: red; } |
八、X:only-of-type
Example Source Code: li:only-of-type { font-weight: bold; } |
九、X:first-of-type
Example Source Code : ul:first-of-type{ font-weight: bold; } |
相關(guān)文章
- 這篇文章主要介紹了使用before和:after偽類制作css3圓形按鈕,需要的朋友可以參考下2014-04-08
- css偽類選擇器對于大家來說最熟悉的莫過于:link,:focus,:hover之類的了,本文為大家介紹下兩種新增的Css3偽選擇器,感興趣的朋友不要錯過2013-12-24
CSS3 :nth-child()偽類選擇器實現(xiàn)奇偶行顯示不同樣式
css3的強大,讓人驚嘆,今天我們就來“前瞻”一下CSS3的一個偽類選擇器“:nth-child()”實現(xiàn)奇偶行顯示不同樣式,具體的詳細示例可以參考下文,希望對大家有所幫助2013-11-05- 前面花了兩節(jié)內(nèi)容分別在《CSS3選擇器——基本選擇器》和《CSS3選擇器——屬性選擇器》介紹了CSS3選擇器中的基本選擇器和屬性選擇器使用方法,今天要和大家一起學(xué)習(xí)CSS3選擇2012-01-21
利用CSS3的checked偽類實現(xiàn)OL的隱藏顯示的方法
隨著CSS3的發(fā)布,國外研究正如火如荼,但在國內(nèi)還有很多人抱著IE不支持CSS3的想法,始終無動于衷不肯去學(xué)習(xí)。2010-12-18- CSS3標準已提出數(shù)年,但是目前能實現(xiàn)她的瀏覽器并不多,雖然部分瀏覽器能實現(xiàn)部分規(guī)范,但這又有什么用呢?面對更多的兼容性問題,今天我們就來“前瞻”一下CSS3的一個偽類2010-07-10
- 這篇文章主要介紹了詳解css3中的偽類before和after常見用法,本文給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-11-17