<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS3新增结构伪类选择器-nth-child</title>
<style>
/* 1.把所有的偶数 even的孩子选出来 */
ul li:nth-child(even) {
background-color: #ccc;
}
/* 2.把所有的奇数 odd的孩子选出来 */
ul li:nth-child(odd) {
background-color: gray;
}
/* 3.nth-child(n) 从0开始 每次加1 往后面计算 这里面必须是n 不能是其他的字母 选择了所有的孩子*/
/* ol li:nth-child(n) {
background-color: pink;
} */
/* 4.nth-child(2n)母选择了所有的偶数孩子 等价于 even*/
/* ol li:nth-child(2n) {
background-color: pink;
}
ol li:nth-child(2n+1) {
background-color: skyblue;
} */
/* ol li:nth-child(n+3) {
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>
CSS静态案例练习代码（个人学习用）
需积分: 22 164 浏览量
2022-08-03
20:18:23
上传
评论
收藏 11.16MB ZIP 举报
8.3CSS案例练习.zip （17个子文件） 
8.3CSS案例练习 
H5视频标签.html 460B images 
pink.jpg 20KB tudou.jpg 132KB
arr.png 1KB CSS3新增nth-of-type选择器.html 1KB CSS过度练习2.html 790B CSS3新增属性选择器.html 2KB H5音频标签.html 356B media 
music.mp3 2.8MB
mi.mp4 8.57MB mi9.jpg 245KB CSS3宽度calc函数.html 682B CSS3结构伪类选择器.html 1KB 图片模糊案例.html 564B 隐藏遮罩案例.html 1KB CSS过渡练习1.html 1KB CSS3伪类选择器-nth-child.html 2KB
评论0