本文将介绍如何使用 CSS 中的 nth-child() 选择器来精准地修改 HTML 结构中特定位置的文本颜色。通过一个简单的示例，我们将展示如何针对 div 容器内的第二个段落元素设置特定的样式，而无需依赖 tr 或 td 等表格元素。掌握 nth-child() 的用法，可以更灵活地控制页面元素的样式，提高 CSS 代码的可维护性和可读性。
在前端开发中，经常需要针对特定位置的元素应用不同的样式。nth-child() 选择器提供了一种便捷的方式来实现这一目标，它允许我们根据元素在其父元素中的位置来选择元素。
nth-child() 选择器的基本用法
nth-child(n) 选择器选择属于其父元素的第 n 个子元素，不论元素的类型。 n 可以是数字、关键字（even 或 odd），或者一个公式（例如 2n+1）。
立即学习“前端免费学习笔记（深入）”；
示例：修改 div 容器内第二个段落的文本颜色
假设我们有如下 HTML 结构：
<div class="test"> <p>One</p> <p>Two</p> <p>Three</p> </div>
我们希望将第二个段落（即包含 "Two" 的段落）的文本颜色设置为红色。可以使用以下 CSS 代码：
.test p:nth-child(2) {
color: red;
}代码解释：
- .test: 选择 class 为 "test" 的 div 元素。
- p: 选择 div.test 元素内的所有 p (段落) 元素。
- :nth-child(2): 选择父元素中的第二个子元素，并且该子元素是 p 元素。
- color: red: 将选中的段落的文本颜色设置为红色。
完整示例：
<!DOCTYPE html>
<html>
<head>
<style>
.test p:nth-child(2) {
color: red;
}
</style>
</head>
<body>
<div class="test">
<p>One</p>
<p>Two</p>
<p>Three</p>
</div>
</body>
</html>运行以上代码，你将会看到 "Two" 这个段落的文本颜色变成了红色。
注意事项：
- nth-child() 选择器基于元素在父元素中的位置，而不是基于元素的类型。 如果 div.test 中的第二个子元素不是 p 元素，则该样式规则不会生效。
- nth-of-type() 选择器可以用来选择特定类型的第 n 个子元素。 例如，.test p:nth-of-type(2) 将会选择 div.test 中第二个 p 元素，而忽略其他类型的子元素。
总结：
nth-child() 选择器是一个强大的 CSS 工具，可以帮助你更精准地控制页面元素的样式。 通过灵活运用 nth-child()，你可以轻松实现各种复杂的布局和样式需求，提高前端开发效率。 掌握 nth-child() 的用法，将有助于你编写更简洁、更易于维护的 CSS 代码。
