:nth-child屬性是大家常用的css3屬性,:nth-child(n) 選擇器匹配屬于其父元素的第 N 個子元素,不論元素的類型。n 可以是數字、關鍵詞或公式。Odd 和 even 是可用于匹配下標是奇數或偶數的子元素的關鍵詞所有主流瀏覽器均支持 :nth-child() 選擇器,IE8及更早的版本是不支持的。
在進行選擇時,我們會經常用到nth-child()屬性,使用此屬性,可以實現對一個或者多個的選擇。
單個選擇:
應用場景:我們文匯軟件官網的網站開發頁面,去除第一個元素的左邊距,那么CSS應該這樣寫 (對應元素):nth-child(1)
.fw-u12 li:nth-child(1){margin-left:0px;}那么只有第一個li的左邊距為0,其余正常顯示。
![]()
多個選擇:
一般存在于多行排列中,比如我們做的嘉祥石雕項目,產品圖片每一行的第三張需要清除右邊距,那么括號里面的為公式為:(3n+3)。
.gc_left_pro li:nth-child(3n+3){margin-right:0;}那么只要的3的倍數+3,li右邊距都為零,其余右邊距正常顯示。
![]()
關于nth-child具體怎么使用,小編在這里只舉了兩個例子,還有更多的用法等大家去實踐。也歡迎您和我們一同分享。
上一篇: 網頁制作中的切圖是什么?什么是切圖
下一篇: Amaze?UI滾動偵測如何使用
關鍵詞:



