Correcting teacher:天蓬老师
Correction status:qualified
Teacher's comments:
常用伪类选择器:
1.匹配任意位置的元素:”:nth-of-type(an+b)”
其中:an+b: an起点,b是偏移量, n = (0,1,2,3…);even 索引是偶数的子元素,odd索引是奇数的子元素;
2.反向获取任意位置的元素:”:nth-last-of-type(an+b)”;
3.选择第一个子元素:”:first-of-type”;
4.选择最后一个子元素:”:last-of-type”.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>伪类选择器</title>
<style>
/* 1.匹配任意位置的元素:":nth-of-type(an+b)"
an+b: an起点,b是偏移量, n = (0,1,2,3...)
even 索引是偶数的子元素,odd索引是奇数的子元素*/
ul li:nth-of-type(1n + 2) {
background-color: cyan;
}
ul li:nth-of-type(even) {
background-color: darkred;
}
ul li:nth-of-type(odd) {
background-color: darkturquoise;
}
/* 2.反向获取任意位置的元素:":nth-last-of-type(an+b)" */
ul li:nth-last-of-type(-n + 3) {
background-color: darkgoldenrod;
}
/* 3.选择第一个子元素:":first-of-type" */
ul li:first-of-type {
background-color: violet;
}
/* 4.选择最后一个子元素:":last-of-type" */
ul li:last-of-type {
background-color: wheat;
}
</style>
</head>
<body>
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
<li>item7</li>
<li>item8</li>
<li>item9</li>
<li>item10</li>
</ul>
</body>
</html>