CSS教程：:nth-child()选择器 作者：马育民 • 2024-04-09 22:31 • 阅读：10012 # 说明 `:nth-child(n)` 选择器匹配父元素的第 N 个子元素，不论元素的类型。 n 可以是数字、关键词或公式。 ### 例子 下面的HTML中，选中 `.box` 的第3个子元素，设置该元素的背景为 `green`，文字颜色是 `red`，字体大小是 `30px` ``` <div class="box"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div> ``` 实现 CSS： **注意：** `:nth-child(3)` 与 `.box` 要有空格，与伪类选择器不同 ``` <style> /* 选中 .box 的第3个子元素 */ .box :nth-child(3){ background-color: green; color: red; font-size: 30px; } </style> ``` 原文出处：http://www.malaoshi.top/show_1IX7TrNSPmGQ.html