nth-child

:nth-child(n) ---->选中某个元素，该元素必须是某个父元素下的第n个子元素
p:nth-child(n) ---->选中p元素，且该p元素必须是某个父元素下的第n个子元素
注意：n是从1开始的

如下代码，p:nth-child(1)，只会选中第二个div中第一个子元素p;
不会选中第一个div中的第一个p，因为第一个div中第一p元素不是第一个子元素

<style>
    p:nth-child(1){
        color:red
    }        
</style>

<div style="border:1px solid">
    <span>div span中第一个段落。</span>
    <p>div 中第一个段落。</p>
    <p>div 中的最后一个段落。</p>
</div>

<div style="border:1px solid">
    <p>另一个 div 中第一个段落。</p>
    <p>另一个 div 中的最后一个段落。</p>
</div>

• 选择第五个元素

li:nth-child(5) {
    color: green;   
}

要选择第一个元素，可以使用:first-child

• 选择除前五个之外的所有

li:nth-child(n+6) {
    color: green;   
}

如果这里有超过10个元素，它将选择5个后面的所有元素。

• 选择前五个元素

li:nth-child(-n+5) {
    color: green;   
}

• 每四个一组，选择第一个

li:nth-child(4n-7) {  /* 或者 4n+1 */
    color: green;   
}

• 选择奇数或者偶数

  • 奇数

    

    li:nth-child(odd) {
        color: green;   
    }
    

  • 偶数

    

    li:nth-child(even) {
        color: green;   
    }
    

• 选择最后一个元素

li:last-child {
    color: green;
}

这里显示第十个，因为我们这里只有十个元素。如果有八个元素，那么小绿球就是第八个。...

• 选择倒数第二个元素

li:nth-last-child(2) {
    color: green;
}