iT邦幫忙

0

鼠年全馬鐵人挑戰 WEEK 15: 上上 下下 左左 右右 要怎麼解決呢? CSS nth-child

  • 分享至 

  • xImage
  •  

最近切版常常遇到看似規則,但又不規則,一下偏左,一下偏右,
在我還沒遇到nth-child 前,
我的解決方式都是一千零一招,複製貼上各個class,
每次邊貼心裡都暗自想,XXX這要貼到天荒地老阿!真的相見恨晚!

nth-child(n) 選擇器匹配屬於其父元素的第 N 個子元素,不論元素的類型。n可以是數字、關鍵詞或公式。
【範例】規定屬於其父元素的第二個子元素的每個 p的背景色:
p:nth-child(2) { background:red; }
https://ithelp.ithome.com.tw/upload/images/20200524/20124879xIH7igEi5m.png

括弧內的「n」是最重要的關鍵字元了,「n」可以寫成是單數「odd」,或者是寫為偶數「even」。
p:nth-child(odd) { background:red;}
https://ithelp.ithome.com.tw/upload/images/20200524/20124879qOAzr2eoOc.png
p:nth-child(even) { background:red;}
https://ithelp.ithome.com.tw/upload/images/20200524/20124879DBLa9fh1ro.png
n可以是數字、關鍵詞或公式。
p:nth-child(3n+1) { background:red;}
https://ithelp.ithome.com.tw/upload/images/20200524/20124879g548OsyQCp.png

是不是非常方便呢!下次如果有看似規則但不規則的排版,也試試nth-child 吧!


圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言