- 作者：霏梦
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>结构伪类选择器：分组（不区分元素类型）</title> <style> /* 分组结构伪类分二步 */ /* 元素按组分 */ /* 在分组中根据索引进行选择、 */ .h3-title span:last-of-type { background-color: rebeccapurple; } /* 在分组中匹配任何一个 */ .h3-title span:nth-of-type(3) { font-size: 40px; } /* 前3个 */ .h3-title span:nth-of-type(-n + 3) { color: red; } /* 最后三个 */ .h3-title span:nth-last-of-type(-n + 3) { color: blue; } </style> </head> <body> <div class="h3-title"> <div class="wsp">我是第1行</div> <div class="wsp">我是第2行</div> <div class="wsp">我是第3行</div> <span class="wsp">我是第4行</span> <span class="wsp">我是第5行</span> <span class="wsp">我是第6行</span> <span class="wsp">我是第7行</span> <span class="wsp">我是第8行</span> <span class="wsp">我是第9行</span> </div> </body></html>
