: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,其余正常顯示。
多個選擇:
一般存在于多行排列中,比如我們做的嘉祥石雕項(xiàng)目,產(chǎn)品圖片每一行的第三張需要清除右邊距,那么括號里面的為公式為:(3n+3)。
.gc_left_pro li:nth-child(3n+3){margin-right:0;}
那么只要的3的倍數(shù)+3,li右邊距都為零,其余右邊距正常顯示。
關(guān)于nth-child具體怎么使用,小編在這里只舉了兩個例子,還有更多的用法等大家去實(shí)踐。也歡迎您和我們一同分享。
下一篇: Amaze?UI滾動偵測如何使用
關(guān)鍵詞: