CSS 第三个子元素|极客教程

CSS 第三个子元素

在CSS中，我们经常需要选择元素的子元素来进行样式设置。有时候我们需要选择第一个子元素，有时候需要选择最后一个子元素，而有时候我们需要选择第三个子元素。本文将详细介绍如何使用CSS选择器来选择第三个子元素，并提供相关的示例代码。

通过:nth-child()选择器选择第三个子元素

在CSS中，我们可以使用:nth-child()选择器来选择元素的子元素。该选择器的语法为:nth-child(n)，其中n表示要选择的子元素的位置。如果我们想选择第三个子元素，我们可以将n设置为3。下面是一个简单的示例代码：

<!DOCTYPE html>
<html>
<head>
<style>
div:nth-child(3) {
    color: red;
}
</style>
</head>
<body>

<div>第一个子元素</div>
<div>第二个子元素</div>
<div>第三个子元素</div>
<div>第四个子元素</div>

</body>
</html>

Output:

CSS 第三个子元素

在上面的示例中，我们使用:nth-child(3)选择器选择了第三个div元素，并将其文字颜色设置为红色。当我们运行这段代码时，第三个子元素的文字颜色将变为红色。

选择不同类型的第三个子元素

除了选择相同类型的第三个子元素外，我们还可以选择不同类型的第三个子元素。下面是一个示例代码：

<!DOCTYPE html>
<html>
<head>
<style>
div:nth-child(3) {
    color: red;
}

p:nth-child(3) {
    color: blue;
}
</style>
</head>
<body>

<div>第一个div元素</div>
<p>第一个p元素</p>
<div>第二个div元素</div>
<p>第二个p元素</p>
<div>第三个div元素</div>
<p>第三个p元素</p>

</body>
</html>

Output:

CSS 第三个子元素

在上面的示例中，我们分别选择了第三个div元素和第三个p元素，并将它们的文字颜色分别设置为红色和蓝色。当我们运行这段代码时，第三个div元素的文字颜色将变为红色，第三个p元素的文字颜色将变为蓝色。

选择特定类的第三个子元素

除了选择特定类型的第三个子元素外，我们还可以选择具有特定类的第三个子元素。下面是一个示例代码：

<!DOCTYPE html>
<html>
<head>
<style>
div:nth-child(3).special {
    color: green;
}
</style>
</head>
<body>

<div>第一个div元素</div>
<div class="special">第二个div元素</div>
<div>第三个div元素</div>
<div class="special">第四个div元素</div>

</body>
</html>

Output:

CSS 第三个子元素

在上面的示例中，我们选择了具有特定类”special”的第三个div元素，并将其文字颜色设置为绿色。当我们运行这段代码时，具有特定类”special”的第三个div元素的文字颜色将变为绿色。

选择奇数位置的第三个子元素

有时候我们可能需要选择奇数位置的第三个子元素。我们可以使用:nth-child(odd)选择器来选择奇数位置的子元素。下面是一个示例代码：

<!DOCTYPE html>
<html>
<head>
<style>
div:nth-child(odd) {
    color: purple;
}
</style>
</head>
<body>

<div>第一个div元素</div>
<div>第二个div元素</div>
<div>第三个div元素</div>
<div>第四个div元素</div>
<div>第五个div元素</div>

</body>
</html>

Output:

CSS 第三个子元素

在上面的示例中，我们使用:nth-child(odd)选择器选择了奇数位置的div元素，并将它们的文字颜色设置为紫色。当我们运行这段代码时，第一、第三、第五个div元素的文字颜色将变为紫色。

选择偶数位置的第三个子元素

类似地，我们也可以选择偶数位置的第三个子元素。我们可以使用:nth-child(even)选择器来选择偶数位置的子元素。下面是一个示例代码：

<!DOCTYPE html>
<html>
<head>
<style>
div:nth-child(even) {
    color: orange;
}
</style>
</head>
<body>

<div>第一个div元素</div>
<div>第二个div元素</div>
<div>第三个div元素</div>
<div>第四个div元素</div>
<div>第五个div元素</div>

</body>
</html>

Output:

CSS 第三个子元素

在上面的示例中，我们使用:nth-child(even)选择器选择了偶数位置的div元素，并将它们的文字颜色设置为橙色。当我们运行这段代码时，第二、第四个div元素的文字颜色将变为橙色。

选择第三个子元素的子元素

有时候我们可能需要选择第三个子元素的子元素。我们可以使用:nth-child()选择器的嵌套来实现这一目的。下面是一个示例代码：

<!DOCTYPE html>
<html>
<head>
<style>
div:nth-child(3) span {
    color: brown;
}
</style>
</head>
<body>

<div>
    <span>第一个span元素</span>
</div>
<div>
    <span>第二个span元素</span>
</div>
<div>
    <span>第三个span元素</span>
</div>
<div>
    <span>第四个span元素</span>
</div>

</body>
</html>

Output:

CSS 第三个子元素

在上面的示例中，我们选择了第三个div元素的子元素span，并将其文字颜色设置为棕色。当我们运行这段代码时，第三个div元素的子元素span的文字颜色将变为棕色。

选择第三个子元素的相邻元素

有时候我们可能需要选择第三个子元素的相邻元素。我们可以使用:nth-child()选择器的相邻兄弟选择器”+”来实现这一目的。下面是一个示例代码：

<!DOCTYPE html>
<html>
<head>
<style>
div:nth-child(3) + div {
    color: teal;
}
</style>
</head>
<body>

<div>第一个div元素</div>
<div>第二个div元素</div>
<div>第三个div元素</div>
<div>第四个div元素</div>

</body>
</html>

Output:

CSS 第三个子元素

在上面的示例中，我们选择了第三个div元素的相邻元素div，并将其文字颜色设置为青色。当我们运行这段代码时，第四个div元素的文字颜色将变为青色。

选择第三个子元素的后续元素

有时候我们可能需要选择第三个子元素的后续元素。我们可以使用:nth-child()选择器的通用兄弟选择器”~”来实现这一目的。下面是一个示例代码：

<!DOCTYPE html>
<html>
<head>
<style>
div:nth-child(3) ~ div {
    color: pink;
}
</style>
</head>
<body>

<div>第一个div元素</div>
<div>第二个div元素</div>
<div>第三个div元素</div>
<div>第四个div元素</div>
<div>第五个div元素</div>

</body>
</html>

Output:

CSS 第三个子元素

在上面的示例中，我们选择了第三个div元素的后续元素div，并将它们的文字颜色设置为粉色。当我们运行这段代码时，第四、第五个div元素的文字颜色将变为粉色。

选择第三个子元素的父元素

有时候我们可能需要选择第三个子元素的父元素。我们可以使用:nth-child()选择器的父元素选择器”!”来实现这一目的。下面是一个示例代码：

<!DOCTYPE html>
<html>
<head>
<style>
div:nth-child(3):parent {
    background-color: lightblue;
}
</style>
</head>
<body>

<div>
    <div>第一个子元素</div>
</div>
<div>
    <div>第二个子元素</div>
</div>
<div>
    <div>第三个子元素</div>
</div>
<div>
    <div>第四个子元素</div>
</div>

</body>
</html>

Output:

CSS 第三个子元素

在上面的示例中，我们选择了第三个子元素的父元素div，并将其背景颜色设置为浅蓝色。当我们运行这段代码时，第三个子元素的父元素div的背景颜色将变为浅蓝色。

选择第三个子元素的兄弟元素

有时候我们可能需要选择第三个子元素的兄弟元素。我们可以使用:nth-child()选择器的兄弟元素选择器”|”来实现这一目的。下面是一个示例代码：

<!DOCTYPE html>
<html>
<head>
<style>
div:nth-child(3) | div {
    font-weight: bold;
}
</style>
</head>
<body>

<div>第一个div元素</div>
<div>第二个div元素</div>
<div>第三个div元素</div>
<div>第四个div元素</div>

</body>
</html>

Output:

CSS 第三个子元素