如何使用CSS选择器选中特定父元素下的第1个子元素和最后一个子元素？

在CSS中，要选中特定父元素下的第1个子元素和最后一个子元素，可以使用`:first-child`和`:last-child`伪类选择器。

1. `:first-child`伪类选择器用于匹配父元素的第一个子元素。如果该子元素符合条件，那么它会被选中。例如，如果你想要选中所有`<div>`元素中的第一个`<p>`子元素，可以使用如下选择器：

   div > p:first-child {
       /* 样式 */
   }

这段CSS代码会选中所有`<div>`元素的第一个直接子元素`<p>`并应用相应的样式。

2. `:last-child`伪类选择器用于匹配父元素的最后一个子元素。如果该子元素符合条件，那么它会被选中。例如，选中所有`<div>`元素中的最后一个`<p>`子元素的CSS选择器为：

   div > p:last-child {
       /* 样式 */
   }

这段CSS代码会选中所有`<div>`元素的最后一个直接子元素`<p>`并应用相应的样式。

需要注意的是，`:first-child`和`:last-child`都严格要求所选的元素必须是其父元素的第一个或最后一个子元素，否则这些规则不会被应用。

相关问题

如何使用CSS选择器选中特定父元素下的第一个子元素？

在CSS中，可以使用子选择器（>）来选中特定父元素下的第一个子元素。具体方法是将父选择器和子选择器用子选择器符号（>）连接起来，中间不留空格。例如，如果你想选中类名为"parent"的元素的第一个直接子元素（该子元素也是一个类名为"child"的元素），你可以使用如下选择器：

.parent > .child:first-child {
    /* CSS规则 */
}

这样就会选中所有类名为"parent"的元素下的第一个类名为"child"的直接子元素，并应用其中定义的CSS规则。

另一种方法是使用`:first-child`伪类选择器，它专门用于选中父元素下的第一个子元素，但这个子元素必须是其类型的第一个子元素。例如：

.parent > :first-child {
    /* CSS规则 */
}

这段CSS代码将会选中所有类名为"parent"的元素的第一个子元素，并应用相应的CSS规则。

需要注意的是，`:first-child`选择器会匹配任何类型的第一个子元素，而不一定是类名为"child"的元素。如果你需要精确地选中特定类型的第一个子元素，你应该使用子选择器（>）和类选择器（.child）结合的方式。

如果父元素下的子元素有不同类型，`nth-child()` 和 `nth-of-type()` 有什么区别？

`nth-child()` 与 `nth-of-type()` 都是CSS伪类选择器，用于定位元素集合中的特定位置的元素。它们的主要区别在于如何确定元素的位置：

1. `nth-child()` 选择器会将父元素下的所有子元素进行编号，无论它们的类型是否相同，都会按照它们在父元素中的顺序来计算位置。它不区分元素的类型，只要是第n个子元素就会被选中。比如，`ul li:nth-child(2)` 会选择`ul`元素下的第二个子元素，即使它不是`li`元素。

2. `nth-of-type()` 选择器则只考虑与指定类型相同的子元素，并为这些同类元素进行编号。它忽略了所有非指定类型的子元素。例如，`ul li:nth-of-type(2)` 会选择`ul`元素下第二个`li`元素，即使在第二个位置上可能还存在其他类型的元素。

假设有一个HTML结构如下：

<div>
  <p>这是第一个段落。</p>
  <p>这是第二个段落。</p>
  <div>这是一个div元素。</div>
  <p>这是第三个段落。</p>
</div>

在这个例子中：
- 使用`nth-child(3)`会选择`<p>这是第三个段落。</p>`，因为它是在第三个位置上的子元素。
- 使用`nth-of-type(2)`则会选择第二个`<p>`元素，即`<p>这是第二个段落。</p>`，因为它在所有`<p>`元素中的顺序是第二个，忽略掉了`<div>`元素。