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