W3School TIY Editor
W3School 在线教程
改变方向
暗黑模式
运行代码
<!DOCTYPE html> <html> <head> <style> /* 选择任何兄弟元素组中的第四个元素 */ :nth-child(4) { background-color: yellow; } /* 选择 div 兄弟元素中的第二个元素 */ div:nth-child(2) { background-color: red; } /* 选择列表中的第二个 li 元素 */ li:nth-child(2) { background-color: lightgreen; } </style> </head> <body> <h1>:nth-child 示例</h1> <div> <p>这是一些文本。</p> </div> <div> <p>这是一些文本。</p> </div> <div> <p>这是一些文本。</p> </div> <ul> <li>第一个列表项</li> <li>第二个列表项</li> <li>第三个列表项</li> <li>第四个列表项</li> <li>第五个列表项</li> </ul> </body> </html>