丁鹿学堂前端培训分享：css伪类选择器（一）

CSS结构伪类是一个相对复杂的CSS选择器。
一旦掌握，可以提高项目中样式编写的效率。
:nth-child(n)指定从父元素向上查找第n个元素，范围包括当前元素。
:nth-child(2n)表示偶数位置的所有元素都会被选择，但2a、2b、2c等写法是不行的。
:nth-child(2n+1)表示奇数位置的所有元素都将被选择。
同样，n是一个变量。
:nth-child(-n+5)表示选择前5个元素，-n是固定写法，然后根据需要选择第一个x，只需添加x即可。
:nth-last-child(n)与:nth-child具有类似的功能，但前者从后到前计数，用于查找父级的最后n个元素。
结构伪类：:nth-type-of(n)用于当父元素下的子元素类型不一致时，选择特定类型的第n个元素，排除其他元素类型。
例如，如果使用divspan:nth-child(4)，即使找到p元素，也会选择第四个范围。
然而divspan:nth-type-of(4)忽略其他type元素，直接搜索第四个span，并成功选择span4作为书写样式。
:nth-last-type-of表示从后到前选择特定类型的元素。
使用方法与:nth-type-of一致。

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

CSS中的伪类结构选择器是在开发中实现特定样式要求的强大工具。
这些选择器包括第一个子级、最后一个子级、第九个子级(n)、最后第九个子级(n)等。
它们可以帮助您控制列表中特定元素的样式，例如第一行、最后一行、奇数/偶数行以及指定位置的元素。
首先，firstchild和lastchild分别用于选择列表中的第一个和最后一个元素。
例如，要将列表的第一个元素设置为红色，可以使用`li:first-child{color:red;}`，类似地，要将最后一行的字体设置为绿色，可以使用`li:last-child{;颜色：绿色；}`。
对于第n个子元素(n)和最后的第九个子元素(n)，第一个选择列表中的第n个元素，第二个选择最后一个元素中的第n个元素。
例如，如果第三行的字体是蓝色，则使用`li:nth-child(3){color:blue;}`，如果倒数第三个元素设置为红色，则使用`li:nth-最后一个孩子（3）{颜色：红色;}`。
您还可以根据奇偶性选择行，例如奇数行的背为灰色，“li:nth-child(odd){background:#999;}”，偶数行的背景为灰色。
rows是kaki，`li:nth-child(also){background:#F6E0AF;}`。
除了选择特定位置的元素外，还可以选择第n个之后或之前的元素，例如将第五行开始的背景颜色设置为蓝色，`li:nth-child(n+5){背景。
:#0ab1fc;}`，前三行背景设置为绿色，`li:nth-child(-n+3){background:#2cae1d;}`。
对于倒数元素，`li:nth-last-child(n+3){font-weight:bold;}`将从最后一个元素`li:nth-last-child(-n+3)中选择第n个及后续元素){font-weight:bold;}`选择最后一个元素中的第n个和前一个元素。
最后，如果需要选择每三个元素，可以使用nth-child(3n)和nth-child(3n+1)。
....例如，将第3、第6、...行的背景设置为橙色，`li:nth-child(3n){background:orange;}`并设置第1行、第4、第7行...红色，`li:nth-child(3n+1){背景：红色;}`。