CSS3 结构伪类选择器：终结混乱，掌握选择器技巧

前端

2023-03-25 07:25:29

致敬，CSS3 结构伪类选择器：掌控元素定位的利器

一、结识 CSS3 结构伪类选择器家族

在 CSS3 的世界里，结构伪类选择器扮演着至关重要的角色，它们如同特种部队般，专门解决元素定位的难题。让我们先来认识一下这个庞大家族中的八位成员：

:first-child
:last-child
:nth-child
:nth-of-type
:first-of-type
:last-of-type
:only-child
:only-of-type

二、实战应用，玩转结构伪类选择器

理论固然重要，但只有通过实战，我们才能真正领悟这些选择器的精髓。让我们用几个生动的例子来体验它们的强大威力：

选择父元素中的第一个子元素：:first-child

让我们假设有一个包含多个 <h2> 子元素的 <h1> 元素。如果你想为 <h1> 元素中的第一个 <h2> 元素设置一个独特的样式，你可以使用以下代码：
```
h1 > h2:first-child {
  color: red;
}
```
选择父元素中的最后一个子元素：:last-child

如果你的目标是为 <h1> 元素中的最后一个 <h2> 元素添加样式，请使用：
```
h1 > h2:last-child {
  color: blue;
}
```
选择父元素中第 N 个子元素：:nth-child

假如你想为 <h1> 元素中的第三个 <h2> 元素设置样式，你可以使用：
```
h1 > h2:nth-child(3) {
  color: green;
}
```
选择父元素中第 N 个相同类型子元素：:nth-of-type

如果 <h1> 元素有多个 <h2> 子元素，而你只想为第二个 <h2> 元素设置样式，可以使用：
```
h1 > h2:nth-of-type(2) {
  color: orange;
}
```
选择父元素中的第一个相同类型子元素：:first-of-type

让我们为 <h1> 元素中的第一个 <h2> 元素设置粉色：
```
h1 > h2:first-of-type {
  color: pink;
}
```
选择父元素中的最后一个相同类型子元素：:last-of-type

现在，为 <h1> 元素中的最后一个 <h2> 元素设置紫色：
```
h1 > h2:last-of-type {
  color: purple;
}
```
选择父元素中唯一的子元素：:only-child

如果 <h1> 元素只有一个 <h2> 子元素，可以使用以下代码设置其样式：
```
h1 > h2:only-child {
  color: black;
}
```
选择父元素中唯一一个相同类型子元素：:only-of-type

最后，我们为 <h1> 元素中唯一一个 <h2> 元素设置白色：
```
h1 > h2:only-of-type {
  color: white;
}
```

三、挥洒自如，掌控 CSS3 结构伪类选择器

掌握了这八个选择器，你就拥有了灵活精准地定位元素的秘密武器。无论你想突出某个特定元素，还是根据元素在文档中的位置对其进行样式化，它们都能帮你轻松实现。

四、常见问题解答

:nth-child 和 :nth-of-type 的区别是什么？

:nth-child 选择器基于所有子元素，而 :nth-of-type 选择器仅基于相同类型的子元素。
如何为父元素中的第一个和最后一个子元素设置相同的样式？

使用 :first-child 和 :last-child 选择器并将其链接在一起，如下所示：
```
h1 > h2:first-child, h1 > h2:last-child {
  color: blue;
}
```
:only-child 和 :only-of-type 有什么区别？

:only-child 选择器选择父元素中唯一的子元素，而 :only-of-type 选择器选择父元素中唯一一个相同类型的子元素。
如何选择父元素中第三个和之后的子元素？

使用 :nth-child 选择器并指定一个条件，例如：
```
h1 > h2:nth-child(n + 3) {
  color: green;
}
```
如何在 CSS 中选择兄弟元素？

虽然结构伪类选择器不能直接选择兄弟元素，但你可以使用 + 或 ~ 邻接选择器来实现类似的效果。