鼠年全马铁人挑战 WEEK 15: 上上 下下 左左 右右 要怎么解决呢？ CSS nth-child

最近切版常常遇到看似规则，但又不规则，一下偏左，一下偏右，
在我还没遇到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 吧！