官方解释：p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。
我是表示很难理解。
应该理解为，p元素的父元素下面的第二个p元素。
no，不对！看下面的例子吧。
1 2 3 4 5 | <style> p:nth-child(2){ background: blue; }</style> |
1 2 3 4 5 6 7 8 9 | <div class="parent"> <p>第1行P元素</p> <p>第2行P元素</p> <p>第3行P元素</p> <p>第4行P元素</p> <p>第5行P元素</p> <p>第6行P元素</p> <p>第7行P元素</p></div> |
效果如下图
貌似上面那个观点是正确的。看下面的代码，把p元素前面加一个span标签。
1 2 3 4 5 6 7 8 9 10 | <div class="parent"> <span>我只是一个span元素</span> <p>第1行P元素</p> <p>第2行P元素</p> <p>第3行P元素</p> <p>第4行P元素</p> <p>第5行P元素</p> <p>第6行P元素</p> <p>第7行P元素</p></div> |
效果如下图
显然和我们想的不一样，p:child(2)的意思应该是p标签父元素的地二个孩子。
我可一欣然的告诉你这个想法也不对的。继续看下面，我把span标签放到第一个p标签后面。
1 2 3 4 5 6 7 8 9 10 | <div class="parent"> <p>第1行P元素</p> <span>我只是一个span元素</span> <p>第2行P元素</p> <p>第3行P元素</p> <p>第4行P元素</p> <p>第5行P元素</p> <p>第6行P元素</p> <p>第7行P元素</p></div> |
效果出我们所料，如下图
元素无任何颜色变化。
我推测，p:nth-child(2)的意思应该是，选择p标签父元素下面第二个元素并且这个元素为p元素。
大胆尝试，把样式选择器修改一下，变为nth-child（3）
1 2 3 | p:nth-child(3){ background: blue;} |
效果如下图
看来结论正确：
p:nth-child(2)的意思应该是，选择p标签父元素下面第二个元素并且这个元素为p元素。
Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）。
我们修改上面的style
1 2 3 4 5 6 | p:nth-child(odd){ background: blue;}p:nth-child(even){ background: yellow;} |
效果如下图
从图中也可看出span元素并没有被选择，但是它依旧在队列的顺序当中，只是并没有被选择。
使用公式 nth:child(an + b)。描述：表示周期的长度，n 是计数器（从 0 开始），b 是偏移值。
上面这个公式可以做出某些不规则的选择
咱们继续修改style
1 2 3 | p:nth-child(3n+0){background:#ff0000;} |
效果如下图
你可以随意修改a，n, b进行尝试。