这篇文章详细解释了如何使用CSS的:nth-child伪类选择器，来为HTML中的无序列表（ul）和有序列表（ol）的偶数和奇数项目设置不同的背景颜色。
<!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(even) {
background-color: #ccc;
}
/* 把所有奇数选出来 */
ul:nth-child(odd) {
background-color: skyblue;
}
/* :nth-child(n) 从0开始 每次加一 往后面计算 这里必须是n 不能是其他字母 */
/* ol li:nth-child(n) {
background-color: pink;
} */
/* 等价与even
ol li:nth-child(2n) {
background-color: pink;
} */
ol li:nth-child(n+3) {
background-color: pink;
}
</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>
</ul>
<ol>
<li>第1个人</li>
<li>第2个人</li>
<li>第3个人</li>
<li>第4个人</li>
<li>第5个人</li>
<li>第6个人</li>
<li>第7个人</li>
<li>第8个人</li>
</ol>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
