📅 最后修改于: 2023-12-03 15:07:21.690000 🧑 作者: Mango
在HTML和CSS中，'nth-child'是一个非常有用的伪类，可用于选择指定位置的元素。Nth-child用于选择匹配父元素的第n个子元素，而无需对所有子元素进行计数。
在印地语中，'nth-child'的翻译是'निते-बालक', 该伪类通常用于CSS选择器中，以选择元素的特定子代。
在CSS中使用' nth-child'：
.parent-element:nth-child(n) {
/*样式*/
}
这里的'parent-element'指的是元素的父级， 'n'代表要选择的子元素的位置，例如：1,2,3,4等。
在HTML中的示例：
<body>
<div class="parent-element">
<p>第一个段落</p>
<p>第二个段落</p>
<p>第三个段落</p>
<p>第四个段落</p>
<p>第五个段落</p>
</div>
</body>
在上面的HTML示例中，我们有一个父级元素，即'parent-element'，其中包含了五个'p'元素。现在我们想选择第二个'p'元素，可以使用以下代码：
.parent-element p:nth-child(2) {
/*样式*/
}
这将选择'parent-element'中的第二个'p'元素，并对其应用样式。
以下是一个简单的示例，其中使用' nth-child'选择列表中的每个第二个元素并对其应用样式。
<body>
<ul>
<li>第一行</li>
<li>第二行</li>
<li>第三行</li>
<li>第四行</li>
<li>第五行</li>
</ul>
</body>
ul li:nth-child(2) {
color: red;
}
在此示例中，我们使用' nth-child'选择列表中的每个第二个元素，并将其文本颜色设置为红色。这将选择'第二行'和'第四行'，并使它们的文本颜色变为红色。
# 印地语中的 nth-child CSS - HTML
## 介绍
在HTML和CSS中，'nth-child'是一个非常有用的伪类，可用于选择指定位置的元素。Nth-child用于选择匹配父元素的第n个子元素，而无需对所有子元素进行计数。
在印地语中，'nth-child'的翻译是'निते-बालक'，该伪类通常用于CSS选择器中，以选择元素的特定子代。
## 用法
在CSS中使用' nth-child'：
``` CSS
.parent-element:nth-child(n) {
/*样式*/
}
这里的'parent-element'指的是元素的父级， 'n'代表要选择的子元素的位置，例如：1,2,3,4等。
在HTML中的示例：
<body>
<div class="parent-element">
<p>第一个段落</p>
<p>第二个段落</p>
<p>第三个段落</p>
<p>第四个段落</p>
<p>第五个段落</p>
</div>
</body>
在上面的HTML示例中，我们有一个父级元素，即'parent-element'，其中包含了五个'p'元素。现在我们想选择第二个'p'元素，可以使用以下代码：
.parent-element p:nth-child(2) {
/*样式*/
}
这将选择'parent-element'中的第二个'p'元素，并对其应用样式。
以下是一个简单的示例，其中使用' nth-child'选择列表中的每个第二个元素并对其应用样式。
<body>
<ul>
<li>第一行</li>
<li>第二行</li>
<li>第三行</li>
<li>第四行</li>
<li>第五行</li>
</ul>
</body>
ul li:nth-child(2) {
color: red;
}
在此示例中，我们使用' nth-child'选择列表中的每个第二个元素，并将其文本颜色设置为红色。这将选择'第二行'和'第四行'，并使它们的文本颜色变为红色。