CSS Second Child

在本文中，我们将理解CSS 第二个子元素。让我们了解什么是第二个子元素。

第二个子元素

CSS 中的第二个子元素是指与第二个数字相关的子元素。让我们通过一个演示来理解它。

演示

下面的代码包含一个作为父级的“div”元素。“div”元素包含多个子元素。直接跟在父元素后面的“p”元素被认为是第一个子元素，而下一个“p”元素被认为是第二个子元素。

代码

输出

这是输出，我们可以清楚地看到第二个子元素。

我们可以借助 :nth-child() 选择器来选择父级的第二个子元素。

:nth-child() 选择器

这是一个伪类选择器，用于匹配第 n 个子元素。它允许我们选择父级的任何子元素并为该元素设置样式。

语法

子元素的名称应写在语法的开头。“n”是数字、odd 关键字、even 关键字或公式。

:nth-child() 选择器演示

我们将通过演示来理解 :nth-child()。

演示 1

在此演示中，我们将逐一选择所有子元素并为其应用样式。我们将创建一个包含 10 种电子电器的列表，并使用 nth-child() 选择每个项目以赋予它们不同的颜色。

代码

输出

这是输出，我们可以看到每个项目都应用了不同的颜色。

演示 2

在此演示中，我们将使用 nth-child() 来选择奇数和偶数子元素并为其设置样式。

代码

输出

在输出中，我们可以看到奇数子元素是浅绿色，偶数子元素是浅蓝色。

演示 3

在此演示中，我们将使用公式“3n + 1”来选择每第三个子元素并为其设置样式。

代码

输出

这是输出，我们可以看到每第 3、4、5 和第 6 个子元素都是红色，带有黄色背景。

使用 :nth-child() 应用第二个子元素样式的演示

我们将使用 nth-child() 来选择第二个子元素并为其应用样式。

代码

输出

在这里，在输出中，我们可以看到第二个子元素已应用样式。

浏览器支持

以下是支持 :nth-child() 选择器的浏览器

• 谷歌浏览器
• Safari
• Microsoft Edge
• 火狐
• Opera

结论

在本文中，我们已经理解了CSS 第二个子元素。以下是一些需要记住的要点

1. 与第二个数字相关联的子元素称为第二个子元素。
2. :nth-child() 选择器用于选择子元素。
3. 我们可以通过三种方式选择子元素
   • 使用数字，即 nth-child(2)
   • 使用 even 和 odd 关键字，即 nth-child(even)
   • 使用公式，即 nth-child(2n)