<!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> /* 结构伪类选择器 权重 10*/ ul li:first-child { color: cyan; } ul li:last-child { color: red; } ul li:nth-child(8) { color: green; } ul li:nth-child(even) { background-color: indianred; } ul li:nth-child(odd) { background-color: khaki; } ul li:nth-child(2n) { border: 1px solid green; } ul li:nth-child(2n + 1) { border: 1px solid gold; } ul li:nth-child(5n) { text-align: center; } ul li:nth-child(n + 5) { font-weight: bolder; } ul li:nth-child(-n + 5) { height: 40px; } div span:nth-child(2) { /* 注意 */ /* 第1个span是div的第2个孩子 */ background-color: coral; } div span:nth-of-type(2n + 1) { /* 用法同 nth-child */ color: red; } </style> </head> <body> <!-- 11 --> <ul> <!-- ul>li{$}*10 --> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> </ul> <div> <p>我是第一个child</p> <span>我是第1个span</span> <span>我是第2个span</span> <span>我是第3个span</span> </div> </body> </html>