久久无码中文字幕_日韩精品无码一本二本三_久久精品呦女暗网_欧美一级夜夜爽_久久精品国产99久久99久久久

06
2017/01

CSS3 :nth-child() 選擇器如何使用

發(fā)布時間:2017-01-06 15:04:21
發(fā)布者:369563174
瀏覽量:
0

:nth-child屬性是大家常用的css3屬性,:nth-child(n) 選擇器匹配屬于其父元素的第 N 個子元素,不論元素的類型。n 可以是數(shù)字、關(guān)鍵詞或公式。Odd 和 even 是可用于匹配下標(biāo)是奇數(shù)或偶數(shù)的子元素的關(guān)鍵詞所有主流瀏覽器均支持 :nth-child() 選擇器,IE8及更早的版本是不支持的。

在進(jìn)行選擇時,我們會經(jīng)常用到nth-child()屬性,使用此屬性,可以實(shí)現(xiàn)對一個或者多個的選擇。

單個選擇: 

應(yīng)用場景:我們文匯軟件官網(wǎng)的網(wǎng)站開發(fā)頁面,去除第一個元素的左邊距,那么CSS應(yīng)該這樣寫 (對應(yīng)元素):nth-child(1)

   .fw-u12 li:nth-child(1){margin-left:0px;}


那么只有第一個li的左邊距為0,其余正常顯示。

LK85B$LG%BQI91{W_@K$O)R.png

多個選擇:

一般存在于多行排列中,比如我們做的嘉祥石雕項(xiàng)目,產(chǎn)品圖片每一行的第三張需要清除右邊距,那么括號里面的為公式為:(3n+3)。

    .gc_left_pro li:nth-child(3n+3){margin-right:0;}


那么只要的3的倍數(shù)+3,li右邊距都為零,其余右邊距正常顯示。

2OGT}`O2HQO$Y6{SP3UOB0W.png

關(guān)于nth-child具體怎么使用,小編在這里只舉了兩個例子,還有更多的用法等大家去實(shí)踐。也歡迎您和我們一同分享。

關(guān)鍵詞:
返回列表