CSS选择器：第一个、最后一个、单双、奇偶、第n个、反选，nth-child，last-child，first-child

以下面的8个容器为例：

<style>
    .t123{line-height: 40px;padding: 500px; text-align: left;}
    .t123 p{background-color:#ddd; width: 40px; height: 40px; float: left; margin-right: 10px; text-align: center;}
    
</style>
<div class="t123">
    <p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p>
</div>

1、选择第一个<P>标签的背景为红色；

方法1：增加一行下面的代码。:first-child，代表选择器匹配属于其父元素的第 1 个子元素；

    .t123 p:first-child{background-color:#C00;}

    
方法2：增加一行下面的代码。:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。

    .t123 p:nth-child(1){background-color:#C00;}

2、选择最后一个<P>标签的背景为红色；

增加一行下面的代码。:last-child 代表选择器匹配属于其父元素的最后一个子元素

    .t123 p:last-child{background-color:#C00;}

 

3、选择单数或奇数<P>标签的背景为红色；

增加一行下面的代码。:nth-child(odd) 代表选择器匹配属于其父元素的1、3、5、7……奇数子元素

    .t123 p:nth-child(odd){background-color:#C00;}

4、选择双数或偶数<P>标签的背景为红色；

增加一行下面的代码。:nth-child(even) 代表选择器匹配属于其父元素的2、4、6、8……偶数子元素

    .t123 p:nth-child(even){background-color:#C00;}

5、选择3的倍数<P>标签的背景为红色；

增加一行下面的代码。:nth-child(an + b) 使用公式 (an + b)。描述：表示周期的长度，n 是计数器（从 0 开始），b 是偏移值。
在这里，我们指定了下标是 3 的倍数的所有 p 元素的背景色,代表选择器匹配属于其父元素的3、6、9、12……子元素

    .t123 p:nth-child(3n+0){background-color:#C00;}

6、反向选择3的倍数<P>标签的背景为红色；

增加一行下面的代码。:not(:nth-child(an + b)) 在选择器外层加个:not(); 
代表选择器匹配属于其父元素的除了3、6、9、12……以外的其他子元素

    .t123 p:not(:nth-child(3n+0)){background-color:#C00;}

7、扩展

CSS3 :nth-of-type(n)、:nth-of-type(odd)、:nth-of-type(even)、:nth-of-type(3n+b)选择器

代表规定属于其父元素的第二个 p 元素的每个 p：