CSS 中的结构 伪 类 选择 器是根据 HTML 页面中元素之间的关系来定位 HTML 元素，从而减少对 HTML 元素的 id 属性和 class 属性的依赖
作用:根据元素在HTML中的结构关系查找元素(根据html结构选择标签)
好处:选择方便,省去了很多类名
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 选择li里面的第一个孩子 */
ul li:first-child {
background-color: pink;
}
/* 选择li里面的最后一个孩子 */
ul li:last-child {
background-color: blue;
}
/* 选择li里面的某个孩子 如果写(5) 就是选择第5个孩子 */
ul li:nth-child(5) {
background-color: yellow;
}
/*选择倒数第几个孩子 */
ul li:nth-last-child(3) {
background-color: skyblue;
}
</style>
</head>
<body>
<ul>
<!-- <div>私生子</div> -->
<li>我是li里面的第1个孩子</li>
<li>我是li里面的第2个孩子</li>
<li>我是li里面的第3个孩子</li>
<li>我是li里面的第4个孩子</li>
<li>我是li里面的第5个孩子</li>
<li>我是li里面的第6个孩子</li>
<li>我是li里面的第7个孩子</li>
<li>我是li里面的第8个孩子</li>
<li>我是li里面的第9个孩子</li>
<li>我是li里面的第10个孩子</li>
</ul>
</body>
</html>
E:nth-child(n)**
注意事项:
E:nth-child(n) 只能写n 不能写其他字母.写n表示选中所有孩子
E:nth-child(n) 不能完全取代 E:first-child E:last-child
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 如果直接写n 表示选中所有的孩子 */
/* E:nth-child(n) 只能写n 不能写其他字母*/
/* n为 0 1 2 ..... */
/* .box li:nth-child(n) {
background-color: pink;
} */
/* n可以直接写 数字 表示选择第几个孩子 */
/* .box li:nth-child(6) {
background-color: blue;
} */
/* n为关键字 even(偶数 ) odd(奇数)*/
.box li:nth-child(even) {
background-color: blue;
}
.box li:nth-child(odd) {
background-color: pink;
}
</style>
</head>
<body>
<ul class="box">
<li>我是li里面的第1个孩子</li>
<li>我是li里面的第2个孩子</li>
<li>我是li里面的第3个孩子</li>
<li>我是li里面的第4个孩子</li>
<li>我是li里面的第5个孩子</li>
<li>我是li里面的第6个孩子</li>
<li>我是li里面的第7个孩子</li>
<li>我是li里面的第8个孩子</li>
<li>我是li里面的第9个孩子</li>
<li>我是li里面的第10个孩子</li>
</ul>
</body>
</html>
n为公式:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 2n 表示选中偶数 */
.box li:nth-child(2n) {
/* background-color: pink; */
}
/* 2n+1 表示选中奇数数 */
.box li:nth-child(2n+1) {
/* background-color: blue; */
}
/* 3n 表示3的倍数 */
.box li:nth-child(3n) {
/* background-color: orange; */
}
/* n+5 表示从第5个开始 一直到最后 包含第5个*/
.box li:nth-child(n+5) {
/* background-color: orange; */
}
/* -n+5 选中前5个 包含第5个 */
.box li:nth-child(-n+5) {
background-color: orange;
}
</style>
</head>
<body>
<ul class="box">
<li>我是li里面的第1个孩子</li>
<li>我是li里面的第2个孩子</li>
<li>我是li里面的第3个孩子</li>
<li>我是li里面的第4个孩子</li>
<li>我是li里面的第5个孩子</li>
<li>我是li里面的第6个孩子</li>
<li>我是li里面的第7个孩子</li>
<li>我是li里面的第8个孩子</li>
<li>我是li里面的第9个孩子</li>
<li>我是li里面的第10个孩子</li>
</ul>
</body>
</html>
n的初始值为0
