批改状态:合格
老师批语:
常用伪类选择器:
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>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号