CSS3 中的结构性选择器允许开发者通过元素在文档中的位置来选择元素。这些选择器不仅能够简化选择器的编写，而且能提供更精细的样式控制。

介绍

结构性选择器包括：

  • :first-child：选中作为其父元素的第一个子元素的元素。
  • :last-child：选中作为其父元素的最后一个子元素的元素。
  • :only-child：选中作为其父元素的唯一子元素的元素。
  • :nth-child(n)：选中作为其父元素的第 n 个子元素的元素。
  • :nth-last-child(n)：选中作为其父元素的倒数第 n 个子元素的元素。
  • :nth-of-type(n)：选中作为其父元素的第 n 个指定类型的子元素的元素。
  • :nth-last-of-type(n)：选中作为其父元素的倒数第 n 个指定类型的子元素的元素。
  • :first-of-type：选中作为其父元素的第一个指定类型的子元素的元素。
  • :last-of-type：选中作为其父元素的最后一个指定类型的子元素的元素。

示例

假设我们有以下 HTML 结构：

<div>
  <p>这是一个段落。</p>
  <p>这是另一个段落。</p>
  <div>
    <p>这是一个嵌套段落。</p>
  </div>
</div>

使用结构性选择器，我们可以对段落进行样式设置：

p:first-child {
  color: red;
}

p:last-child {
  color: green;
}

p:nth-child(2) {
  font-weight: bold;
}

p:nth-last-child(2) {
  text-decoration: underline;
}

p:nth-of-type(2) {
  background-color: yellow;
}

p:nth-last-of-type(2) {
  border: 1px solid blue;
}

p:first-of-type {
  padding-left: 20px;
}

p:last-of-type {
  margin-bottom: 20px;
}

以上代码会对指定位置的段落应用不同的样式。

更多信息

想要了解更多关于 CSS3 结构性选择器的知识，请访问我们的CSS3 教程页面。

图片示例

这里有一张 CSS3 结构性选择器的示例图片：

CSS3 结构性选择器示例