CSS3结构性伪类选择器九种写法

CSS3结构性伪类选择器可以根据元素在结构中的位置进行选择。在本文中，我将详细讲解CSS3结构性伪类选择器九种写法，并提供两个实际的示例来说明其用法。

1. :first-child

该选择器选取父元素的第一个子元素。

示例代码：

<ul>
  <li>第一个</li>
  <li>第二个</li>
  <li>第三个</li>
</ul>

li:first-child {
  color: red;
}

效果：第一个li标签的文字颜色为红色。

2. :last-child

该选择器选取父元素的最后一个子元素。

示例代码：

<ul>
  <li>第一个</li>
  <li>第二个</li>
  <li>第三个</li>
</ul>

li:last-child {
  color: red;
}

效果：最后一个li标签的文字颜色为红色。

3. :nth-child(n)

该选择器选取父元素的第n个子元素，其中n可以是一个数字、even（偶数）、odd（奇数）、n+x（从x开始的所有数）等等。

示例代码：

<ul>
  <li>第一个</li>
  <li>第二个</li>
  <li>第三个</li>
  <li>第四个</li>
  <li>第五个</li>
</ul>

li:nth-child(3) {
  color: red;
}

效果：第三个li标签的文字颜色为红色。

4. :nth-last-child(n)

该选择器选取父元素的倒数第n个子元素，使用方式与:nth-child(n)相似。

示例代码：

<ul>
  <li>第一个</li>
  <li>第二个</li>
  <li>第三个</li>
  <li>第四个</li>
  <li>第五个</li>
</ul>

li:nth-last-child(3) {
  color: red;
}

效果：倒数第三个li标签的文字颜色为红色。

5. :nth-of-type(n)

该选择器选取父元素中同类型子元素中的第n个，使用方式与:nth-child(n)相似，但它只选择同类型子元素。

示例代码：

<ul>
  <li>第一个</li>
  <li>第二个</li>
  <a href="#"><li>第三个</li></a>
  <li>第四个</li>
  <a href="#"><li>第五个</li></a>
</ul>

li:nth-of-type(3) {
  color: red;
}

效果：第三个li标签的文字颜色为红色。

6. :nth-last-of-type(n)

该选择器选取父元素中同类型子元素中的倒数第n个，使用方式与:nth-of-type(n)相似。

示例代码：

<ul>
  <li>第一个</li>
  <li>第二个</li>
  <a href="#"><li>第三个</li></a>
  <li>第四个</li>
  <a href="#"><li>第五个</li></a>
</ul>

li:nth-last-of-type(3) {
  color: red;
}

效果：倒数第三个li标签的文字颜色为红色。

7. :first-of-type

该选择器选取父元素中同类型子元素中的第一个。

示例代码：

<ul>
  <a href="#"><li>第一个</li></a>
  <li>第二个</li>
  <li>第三个</li>
</ul>

li:first-of-type {
  color: red;
}

效果：第一个li标签的文字颜色为红色。

8. :last-of-type

该选择器选取父元素中同类型子元素中的最后一个。

示例代码：

<ul>
  <li>第一个</li>
  <li>第二个</li>
  <a href="#"><li>第三个</li></a>
</ul>

li:last-of-type {
  color: red;
}

效果：最后一个li标签的文字颜色为红色。

9. :only-child

该选择器选取父元素中只有一个子元素的子元素。

示例代码：

<ul>
  <li>第一个</li>
</ul>

<ul>
  <li>第二个</li>
  <li>第三个</li>
</ul>

li:only-child {
  color: red;
}

效果：只有一个子元素的li标签的文字颜色为红色。

以上就是CSS3结构性伪类选择器九种写法的详细解释。结构性伪类选择器可以很好地解决一些页面元素的定位问题，在实际开发中非常有用。