极客教程CSS 列表第几个样式
在CSS中，我们经常会使用列表来展示一组相关的项目。有时候我们需要对列表中的某个特定项目进行样式设置，这就需要用到列表中第几个样式的选择器。在本文中，我们将详细介绍如何使用CSS选择器来选择列表中的第几个样式，并提供相关的示例代码。
1. 选择第一个样式
要选择列表中的第一个样式，我们可以使用:first-child伪类选择器。下面是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
ul li:first-child {
color: red;
}
</style>
</head>
<body>
<ul>
<li>第一个样式</li>
<li>第二个样式</li>
<li>第三个样式</li>
</ul>
</body>
</html>
Output:
在上面的示例中，我们使用:first-child选择器选择了列表中的第一个样式，并将其颜色设置为红色。运行代码后，你会看到第一个样式的文本变为红色。
2. 选择第二个样式
要选择列表中的第二个样式，我们可以使用:nth-child()伪类选择器，并传入参数2。下面是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
ul li:nth-child(2) {
font-weight: bold;
}
</style>
</head>
<body>
<ul>
<li>第一个样式</li>
<li>第二个样式</li>
<li>第三个样式</li>
</ul>
</body>
</html>
Output:
在上面的示例中，我们使用:nth-child(2)选择器选择了列表中的第二个样式，并将其字体加粗。运行代码后，你会看到第二个样式的文本变为加粗。
3. 选择第三个样式
要选择列表中的第三个样式，我们可以使用:nth-child()伪类选择器，并传入参数3。下面是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
ul li:nth-child(3) {
text-decoration: underline;
}
</style>
</head>
<body>
<ul>
<li>第一个样式</li>
<li>第二个样式</li>
<li>第三个样式</li>
</ul>
</body>
</html>
Output:
在上面的示例中，我们使用:nth-child(3)选择器选择了列表中的第三个样式，并将其文本添加下划线。运行代码后，你会看到第三个样式的文本有下划线。
4. 选择偶数样式
要选择列表中的偶数样式，我们可以使用:nth-child()伪类选择器，并传入参数even。下面是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
ul li:nth-child(even) {
background-color: lightblue;
}
</style>
</head>
<body>
<ul>
<li>第一个样式</li>
<li>第二个样式</li>
<li>第三个样式</li>
<li>第四个样式</li>
</ul>
</body>
</html>
Output:
在上面的示例中，我们使用:nth-child(even)选择器选择了列表中的偶数样式，并将其背景颜色设置为浅蓝色。运行代码后，你会看到第二个和第四个样式的背景变为浅蓝色。
5. 选择奇数样式
要选择列表中的奇数样式，我们可以使用:nth-child()伪类选择器，并传入参数odd。下面是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
ul li:nth-child(odd) {
color: green;
}
</style>
</head>
<body>
<ul>
<li>第一个样式</li>
<li>第二个样式</li>
<li>第三个样式</li>
<li>第四个样式</li>
</ul>
</body>
</html>
Output:
在上面的示例中，我们使用:nth-child(odd)选择器选择了列表中的奇数样式，并将其文本颜色设置为绿色。运行代码后，你会看到第一个和第三个样式的文本变为绿色。
6. 选择特定范围样式
除了选择特定的位置外，我们还可以选择列表中的特定范围样式。例如，我们可以选择第2到第4个样式。下面是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
ul li:nth-child(n+2):nth-child(-n+4) {
font-style: italic;
}
</style>
</head>
<body>
<ul>
<li>第一个样式</li>
<li>第二个样式</li>
<li>第三个样式</li>
<li>第四个样式</li>
<li>第五个样式</li>
</ul>
</body>
</html>
Output:
在上面的示例中，我们使用:nth-child(n+2):nth-child(-n+4)选择器选择了列表中第2到第4个样式，并将其字体样式设置为斜体。运行代码后，你会看到第二、第三和第四个样式的文本变为斜体。
7. 选择最后一个样式
要选择列表中的最后一个样式，我们可以使用:last-child伪类选择器。下面是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
ul li:last-child {
text-transform: uppercase;
}
</style>
</head>
<body>
<ul>
<li>第一个样式</li>
<li>第二个样式</li>
<li>第三个样式</li>
</ul>
</body>
</html>
Output:
在上面的示例中，我们使用:last-child选择器选择了列表中的最后一个样式，并将其文本转换为大写。运行代码后，你会看到最后一个样式的文本变为大写。
8. 选择倒数第二个样式
要选择列表中的倒数第二个样式，我们可以使用:nth-last-child()伪类选择器，并传入参数2。下面是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
ul li:nth-last-child(2) {
color: purple;
}
</style>
</head>
<body>
<ul>
<li>第一个样式</li>
<li>第二个样式</li>
<li>第三个样式</li>
</ul>
</body>
</html>
Output:
在上面的示例中，我们使用:nth-last-child(2)选择器选择了列表中的倒数第二个样式，并将其文本颜色设置为紫色。运行代码后，你会看到倒数第二个样式的文本变为紫色。
9. 选择特定间隔样式
除了选择连续的样式外，我们还可以选择列表## 10. 选择每隔两个样式
要选择列表中每隔两个样式，我们可以使用:nth-child()伪类选择器，并传入参数2n。下面是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
ul li:nth-child(2n) {
font-size: 20px;
}
</style>
</head>
<body>
<ul>
<li>第一个样式</li>
<li>第二个样式</li>
<li>第三个样式</li>
<li>第四个样式</li>
<li>第五个样式</li>
</ul>
</body>
</html>
Output:
在上面的示例中，我们使用:nth-child(2n)选择器选择了列表中每隔两个样式，并将其字体大小设置为20像素。运行代码后，你会看到第二和第四个样式的字体变为20像素。
11. 选择每隔三个样式
要选择列表中每隔三个样式，我们可以使用:nth-child()伪类选择器，并传入参数3n。下面是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
ul li:nth-child(3n) {
background-color: lightyellow;
}
</style>
</head>
<body>
<ul>
<li>第一个样式</li>
<li>第二个样式</li>
<li>第三个样式</li>
<li>第四个样式</li>
<li>第五个样式</li>
</ul>
</body>
</html>
Output:
在上面的示例中，我们使用:nth-child(3n)选择器选择了列表中每隔三个样式，并将其背景颜色设置为浅黄色。运行代码后，你会看到第三个样式的背景变为浅黄色。
12. 选择第一个和最后一个样式
要选择列表中的第一个和最后一个样式，我们可以使用:first-child和:last-child伪类选择器。下面是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
ul li:first-child,
ul li:last-child {
color: orange;
}
</style>
</head>
<body>
<ul>
<li>第一个样式</li>
<li>第二个样式</li>
<li>第三个样式</li>
<li>第四个样式</li>
<li>第五个样式</li>
</ul>
</body>
</html>
Output:
在上面的示例中，我们使用:first-child和:last-child选择器选择了列表中的第一个和最后一个样式，并将其文本颜色设置为橙色。运行代码后，你会看到第一个和最后一个样式的文本变为橙色。
13. 选择奇数位置的样式
要选择列表中奇数位置的样式，我们可以使用:nth-child()伪类选择器，并传入参数odd。下面是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
ul li:nth-child(odd) {
font-weight: bold;
}
</style>
</head>
<body>
<ul>
<li>第一个样式</li>
<li>第二个样式</li>
<li>第三个样式</li>
<li>第四个样式</li>
<li>第五个样式</li>
</ul>
</body>
</html>
Output:
在上面的示例中，我们使用:nth-child(odd)选择器选择了列表中奇数位置的样式，并将其字体加粗。运行代码后，你会看到第一个、第三和第五个样式的字体变为加粗。
14. 选择偶数位置的样式
要选择列表中偶数位置的样式，我们可以使用:nth-child()伪类选择器，并传入参数even。下面是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
ul li:nth-child(even) {
text-decoration: underline;
}
</style>
</head>
<body>
<ul>
<li>第一个样式</li>
<li>第二个样式</li>
<li>第三个样式</li>
<li>第四个样式</li>
<li>第五个样式</li>
</ul>
</body>
</html>
Output:
在上面的示例中，我们使用:nth-child(even)选择器选择了列表中偶数位置的样式，并将其文本添加下划线。运行代码后，你会看到第二和第四个样式的文本有下划线。
15. 选择倒数第三个到倒数第一个样式
要选择列表中的倒数第三个到倒数第一个样式，我们可以使用:nth-last-child()伪类选择器，并传入参数-n+3。下面是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
ul li:nth-last-child(-n+3) {
color: blue;
}
</style>
</head>
<body>
<ul>
<li>第一个样式</li>
<li>第二个样式</li>
<li>第三个样式</li>
<li>第四个样式</li>
<li>第五个样式</li>
</ul>
</body>
</html>
Output:
在上面的示例中，我们使用:nth-last-child(-n+3)选择器选择了列表中的倒数第三个到倒数第一个样式，并将其文本颜色设置为蓝色。运行代码后，你会看到倒数第三、倒数第二和倒数第一个样式的文本变为蓝色。
16. 选择第一个和第三个样式
要选择列表中的第一个和第三个样式，我们可以使用:nth-child()伪类选择器，并传入参数1和3。下面是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
ul li:nth-child(1),
ul li:nth-child(3) {
font-style: italic;
}
</style>
</head>
<body>
<ul>
<li>第一个样式</li>
<li>第二个样式</li>
<li>第三个样式</li>
<li>第四个样式</li>
<li>第五个样式</li>
</ul>
</body>
</html>
Output:
在上面的示例中，我们使用:nth-child(1), :nth-child(3)选择器选择了列表中的第一个和第三个样式，并将其字体样式设置为斜体。运行代码后，你会看到第一个和第三个样式的文本变为斜体。
17. 选择第二个和第四个样式
要选择列表中的第二个和第四个样式，我们可以使用:nth-child()伪类选择器，并传入参数2和4。下面是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
ul li:nth-child(2),
ul li:nth-child(4) {
text-transform: uppercase;
}
</style>
</head>
<body>
<ul>
<li>第一个样式</li>
<li>第二个样式</li>
<li>第三个样式</li>
<li>第四个样式</li>
<li>第五个样式</li>
</ul>
</body>
</html>
Output:
在上面的示例中，我们使用:nth-child(2), :nth-child(4)选择器选择了列表中的第二个和第四个样式，并将其文本转换为大写。运行代码后，你会看到第二个和第四个样式的文本变为大写。
18. 选择第一个到第三个样式
要选择列表中的第一个到第三个样式，我们可以使用:nth-child()伪类选择器，并传入参数n+1和n+3。下面是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<style>
ul li:nth-child(n+1):nth-child(-n+3) {
background-color: lightblue;
}
</style>
</head>
<body>
<ul>
<li>第一个样式</li>
<li>第二个样式</li>
<li>第三个样式</li>
<li>第四个样式</li>
<li>第五个样式</li>
</ul>
</body>
</html>
Output:
在上面的示例中，我们使用:nth-child(n+1):nth-child(-n+3)选择器选择了列表中的第一个到第三个样式，并将其背景颜色设置为浅蓝色。运行代码后，你会看到第一个到第三个样式的背景变为浅蓝色。