结构伪类选择器
作用：在HTML中定位元素
优势：减少对于HTML中类的依赖，有利于保持代码整洁
场景：常用于查找某父级选择器中的子元素
选择器：
选择器 备注
E:first-child() 匹配父元素的第一个子元素E
E:last-child() 匹配父元素的最后一个子元素E
E:nth-child() 匹配父元素的第n个子元素E
E:nth-last-child() 匹配父元素的倒数第n个子元素E
注意：
1 n=0,1,2,3,4,5……
2 通过n可以组成简单公式
偶数 2n,even
奇数 2n+1,2n-1,odd
前3个 -n+3
第3个往后 n+3（了解）nth-of-type结构伪类选择器
E:nth-of-type(){} 只在父元素的同类型子元素范围中匹配第n个
区别：
:nth-child → 直接在所有孩子中数个数
:nth-of-type → 先通过该 类型 找到符合的一堆子元素，然后在这一堆子元素中数个数
代码：
<!DOCTYPE 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标签 */ li:first-child { background-color: green; } /* 选中最后一个 即第八个li标签 */ li:last-child { background-color: blue; } /* 选中3倍数的标签 */ li:nth-child(3n) { background-color: yellow; } /* 选中第3个span标签 */ div span:nth-of-type(3) { background-color: red; } /* 选中第4个a标签 */ div a:nth-of-type(4) { background-color: red; } </style> </head> <body> <ul> <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> </ul> <div> <p>第1个p标签</p> <p>第2个p标签</p> <p>第3个p标签</p> <span>第1个span标签</span> <span>第2个span标签</span> <span>第3个span标签</span> <span>第4个span标签</span> <a href="#">第1个超链接</a> <a href="#">第2个超链接</a> <a href="#">第3个超链接</a> <a href="#">第4个超链接</a> <a href="#">第5个超链接</a> </div> </body> </html>效果图：
