css中的:first-child、:last-child、:nth-child()、:nth-of-type()和:only-child 伪类选择器

CSS中的:first-child、:last-child、:nth-child()、:nth-of-type()和:only-child是伪类选择器，它们允许你根据元素在其父元素或同级元素中的位置或类型来选择元素。下面是这些选择器的详细介绍：

:first-child

这个选择器选择其父元素的第一个子元素。

示例：

<ul>
  <li>Item 1</li> <!-- 被选中 -->
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

li:first-child {
  color: red;
}

在这个例子中，“Item 1”的文本颜色会被设置为红色，因为它是<ul>元素的第一个<li>子元素。

:last-child

这个选择器选择其父元素的最后一个子元素。

示例：

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li> <!-- 被选中 -->
</ul>

li:last-child {
  color: blue;
}

在这个例子中，“Item 3”的文本颜色会被设置为蓝色，因为它是<ul>元素的最后一个<li>子元素。

:nth-child(an+b)

这个选择器选择其父元素的第an+b个子元素。其中a和b是整数，n是从0开始的计数器。

示例：

<ul>
  <li>Item 1</li> <!-- 1st child -->
  <li>Item 2</li> <!-- 2nd child -->
  <li>Item 3</li> <!-- 3rd child -->
  <li>Item 4</li> <!-- 4th child -->
  <li>Item 5</li> <!-- 5th child -->
</ul>

li:nth-child(2n) {
  background-color: lightgray;
}

在这个例子中，所有偶数位置（即第二个、第四个）的<li>元素的背景色会被设置为浅灰色。

:nth-of-type(an+b)

这个选择器与:nth-child()类似，但它只计算特定类型的子元素。

示例：

<div>
  <p>Paragraph 1</p> <!-- 1st p element -->
  <span>Span 1</span>
  <p>Paragraph 2</p> <!-- 2nd p element -->
  <div>Div 1</div>
  <p>Paragraph 3</p> <!-- 3rd p element -->
</div>

p:nth-of-type(2n) {
  color: green;
}

在这个例子中，第二个和第三个<p>元素的文本颜色会被设置为绿色，因为只有<p>元素被考虑在内，而<span>和<div>被忽略。

:only-child

这个选择器选择那些是其父元素的唯一子元素的元素。

示例：

<div>
  <p>Only child paragraph</p> <!-- 被选中 -->
</div>

p:only-child {
  font-weight: bold;
}

在这个例子中，段落文本会被加粗，因为它是<div>元素的唯一子元素。

兼容性

这些伪类选择器在现代浏览器中都有很好的支持，包括Chrome、Firefox、Safari、Edge等。然而，在较旧的浏览器版本，特别是Internet Explorer中，支持可能会有所不同。因此，在使用这些选择器时，最好检查你的目标浏览器的兼容性情况，并考虑使用前缀或替代方案来确保兼容性。