一、结构伪类
结构伪类是 CSS3 新设计的选择器，我们在前面的 HTML 表格中也是用到了结构伪类作为选择器来选择列表中的一些项，使用结构伪类我们就不用再去给列表中的项去单独添加 class 属性了。
结构伪类 利用文档结构树实现元素过滤，通过文档结构的相互关系来匹配特定的元素，从而减少文档内class 属性和 id 属性的定义，使得文档更加简洁。
结构伪类有很多种形式，并且用法是固定的，但可以灵活使用，以便设计各种特殊样式效果。常见的结构伪类有：
:nth-child()：选择某个元素的一个或多个特定的子元素:nth-last-child()：选择某个元素的一个或多个特定的子元素，从这个元素的最后一个字元素开始计算:nth-of-type()：选择指定的元素:nth-last-of-type()：选择指定的元素，从元素的最后一个开始计算
二、结构伪类 - :nth-child
:nth-child() 选择器可以选择父元素中的一个或者多个子元素，该选择器需要传入一个参数。
创建 HTML 页面，包含一个 ul>li 的列表，具体代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>列表元素1</li>
<li>列表元素2</li>
<li>列表元素3</li>
<li>列表元素4</li>
<li>列表元素5</li>
</ul>
</body>
</html>
在浏览器中打开 HTML 页面，效果如下：
如何让列表元素1的字体颜色变为红色？
我们可以给列表元素1单独添加一个 class，再使用 class 选择器选中第一个元素然后进行样式的修改，这种方式在之前的文章中使用较多。
还有第二种方法，就是使用结构伪类 :nth-child(1)，在上述页面中添加如下 CSS 代码：
ul li:nth-child(1) {
color: red;
}
刷新页面，效果如下：
刚才的场景是 ul 中的子元素全部都是 li，如果混入一个其他的元素，比如 span，在选择元素的时候会把 span 也计算在内吗？
创建一个 HTML 页面，具体代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul li:nth-child(4) {
color: red;
}
</style>
</head>
<body>
<ul>
<li>列表元素1</li>
<li>列表元素2</li>
<li>列表元素3</li>
<span>span元素</span>
<li>列表元素4</li>
<li>列表元素5</li>
</ul>
</body>
</html>
在浏览器中打开 HTML 页面，效果如下：
第四个元素不是 li，所有样式没有任何的变化，如果我们选择第五个元素呢？修改 :nth-child() 选择器中的元素的索引为 5，具体代码如下：
ul li:nth-child(5) {
color: red;
}
刷新页面，效果如下：
样式发生了变化，因此 :nth-child() 结构伪类在计数时会统计所有的子元素，即不是 li 的元素也会被计数，将第五个是 li 的元素样式变成红色。
:nth-child() 结构伪类有如下常用形式：
:nth-child(1)表示父元素中的第一个子元素：nth-child(2n)表示父元素中的第偶数个子元素，与:nth-child(even)表示的含义相同；n 表示任意正整数和0：nth-child(2n+1)表示父元素中的第奇数个子元素，与:nth-child(odd)表示的含义相同；n 表示任意正整数和0:nth-child(-n+2)表示前两个子元素
其中 n 为 0,1,2,3,... 的正整数，n 有点类似列表在进行切片时的步长。
创建 HTML 页面，具体代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul li:nth-child(2n) {
color: yellowgreen;
}
</style>
</head>
<body>
<ul>
<li>列表元素1</li>
<li>列表元素2</li>
<li>列表元素3</li>
<li>列表元素4</li>
<li>列表元素5</li>
</ul>
</body>
</html>
在浏览器中打开 HTML 页面，效果如下：
可以看到 :nth-child(2n) 是可以选中索引为偶数的元素（索引从1开始），第2、4 项都被选中。
修改伪类中的参数为 2n+1，具体代码如下：
ul li:nth-child(2n+1) {
font-weight: bold;
}
刷新页面，效果如下：
索引（从1开始）为奇数的项都被选中。
n 表示正整数，从 0 开始，n 可以作为获取元素的步长，选择器的参数为 3n+1，具体代码如下：
ul li:nth-child(3n+1) {
font-weight: bold;
}
刷新页面，效果如下：
从第一个开始，每隔 3 个选项会设置指定的样式。
n 后面的数字可以看做起点，因为 n 是从 0 开始取值的，设置伪类的参数为 3n+4，具体代码如下：
ul li:nth-child(3n+4) {
font-weight: bold;
}
刷新页面，效果如下：
可以看到样式的设置是从第4个元素开始的。
当然也可以在 n 前面添加一个符号 -，表示只设置前几个，设置如下 CSS 样式：
ul li:nth-child(-n+4) {
font-weight: bold;
}
刷新页面，效果如下：
可以看到之后前4个元素被选中了。
二、结构伪类 - :nth-last-child()
:nth-last-child() 语法与 :nth-child() 类似，不同点是 :nth-last-child() 是从最后一个元素往前开始计数的。
:nth-last-child(1) 代表最后一个子元素，:nth-last-child(-n + 2) 代表最后2个子元素。
创建 HTML 页面，具体代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*倒数最后一个*/
ul li:nth-last-child(1) {
font-size: large;
}
/*倒数前两个*/
ul li:nth-last-child(-n + 2) {
color: aqua;
}
</style>
</head>
<body>
<ul>
<li>列表元素1</li>
<li>列表元素2</li>
<li>列表元素3</li>
<li>列表元素4</li>
<li>列表元素5</li>
<li>列表元素6</li>
<li>列表元素7</li>
<li>列表元素8</li>
<li>列表元素9</li>
</ul>
</body>
</html>
刷新页面，效果如下：
可以看到使用 :nth-last-child() 伪类选择元素的时候是从后往前开始选择的。
