最近切版常常遇到看似規則,但又不規則,一下偏左,一下偏右,
在我還沒遇到nth-child
前,
我的解決方式都是一千零一招,複製貼上各個class
,
每次邊貼心裡都暗自想,XXX這要貼到天荒地老阿!真的相見恨晚!
nth-child(n) 選擇器匹配屬於其父元素的第 N 個子元素,不論元素的類型。n可以是數字、關鍵詞或公式。
【範例】規定屬於其父元素的第二個子元素的每個 p的背景色:p:nth-child(2) { background:red; }
括弧內的「n」是最重要的關鍵字元了,「n」可以寫成是單數「odd」,或者是寫為偶數「even」。p:nth-child(odd) { background:red;}
p:nth-child(even) { background:red;}
n可以是數字、關鍵詞或公式。p:nth-child(3n+1) { background:red;}
是不是非常方便呢!下次如果有看似規則但不規則的排版,也試試
nth-child
吧!