CSS中的结构伪类选择器使用方法

一、需求描述

在开发过程中，会碰到一些选择器的需求：

例如使列表中的第一项或者最后一项显示不同的样式 、列表中的奇数或者偶数项显示不同的背景色 . . . 等等。

我们可以通过 CSS 来实现这样的效果，CSS 给我们提供了几个结构伪类选择器：first-child、last-child、nth-child(n)。

二、基本使用方法

1.常见使用方法

first-child：选择列表中的第一个标签。

举例：第一行字体显示为红色，代码如下：

li:first-child{

color: red;

}

last-child：选择列表中的最后一个标签。

举例，最后一行字体显示为绿色，代码如下：

li:last-child{

color: green;

}

2.nth-child(n) & nth-last-child(n)

①nth-child(n)：选择列表中的第 n 个标签。

举例：第三行字体显示为蓝色，代码如下：

li:nth-child(3){

color: blue;

}

②nth-last-child(n)：选择倒数第 n 个元素。

举例：倒数第三元素字体设置为红色，代码如下：

li:nth-last-child(3){

color: red;

}

3.奇数行、偶数行

①奇数行

nth-child(odd)：选择列表的 奇数行 。

举例，奇数行背景显示为灰色，代码如下：

li:nth-child(odd){

background: #999;

}

我们可以通过另外的方法选择奇数行，例如： nth-child(2n+1) 、 nth-child(2n-1) 等。

代码如下：

/*First*/

li:nth-child(2n+1){

background: #999;

}

/*Second*/

li:nth-child(2n-1){

background: #999;

}

②偶数行

nth-child(even)：选择列表的 偶数行 。

举例：偶数行背景显示为土黄色，代码如下：

li:nth-child(even){

background: #F6E0AF;

}

同样，我们可以通过另外的方法选择偶数行，例如： nth-child(2n) 。

代码如下：

li:nth-child(2n){

background: #F6E0AF;

}

【注意：4&5的原则：不管正序还是倒序，前小后大】

4.选择第 n 个之后/前的元素

nth-child(n+n)：选择第 n 个及之后的元素。

举例：第五行及以后背景色设置为蓝色，代码如下：

li:nth-child(n+5){

background: #0ab1fc;

}

nth-child(-n+n)：选择第 n 个及之前的元素。

举例：前三行背景色设置为绿色，代码如下：

li:nth-child(-n+3){

background: #2cae1d;

}

5.选择倒数第 n 个之后/前的元素。

①nth-last-child(n+n)：选择倒数第 n 个及之后(从下往上，倒着数)的元素。

举例：倒数第三个及之前的元素字体设置为粗体，代码如下：

li:nth-last-child(n+3){

font-weight: bold;

}

②nth-last-child(-n+n)：选择倒数第 n 个及之前（从下往上，倒着数）的元素。

举例：倒数第三个及之后的元素字体设置为粗体，代码如下：

li:nth-last-child(-n+3){

font-weight: bold;

}

6.nth-child(3n)、nth-child(3n+1)
nth-child(3n)：选择第 3、6、. . . 个元素，选择三的倍数。

举例：第3、6、 . . . 三的倍数行背景色设置为橙色，代码如下：

li:nth-child(3n){

background: orange;

}

nth-child(3n+1)：选择第 1、4、7 个元素，从第一个开始每个递增三个。

举例：第1、4、7 . . . 行背景色设置为红色，代码如下：

li:nth-child(3n+1){

background: red;

}