不同父元素的“last-of-type/last-child的CSS选择器？”_编程开发

创始人

2025-01-09 01:30:39

0次

在CSS中，我们可以使用:last-of-type或:last-child选择器来选取不同父元素下的最后一个子元素。

:last-of-type选择器选取的是某一类型的元素在其父元素中的最后一个。例如，如果有多个div元素作为子元素，我们可以使用以下代码选取不同父元素下的最后一个div元素：

div:last-of-type {
  /* CSS属性 */
}

:last-child选择器选取的是某一类型的元素在其父元素中的最后一个子元素，而且这个子元素必须是它的父元素的最后一个子元素。同样，如果有多个div元素作为子元素，我们可以使用以下代码选取不同父元素下的最后一个div元素：

div:last-child {
  /* CSS属性 */
}

下面是一个示例，演示了如何使用:last-of-type选择器选取不同父元素下的最后一个div元素，并将其背景颜色设置为红色：


  第一个 div
  第二个 div
  第三个 div



  第一个 div
  第二个 div
  第三个 div
  第四个 div

在上述示例中，第一个父元素的最后一个div元素和第二个父元素的最后一个div元素的背景颜色都会被设置为红色。

同样，你也可以使用:last-child选择器来实现相同的效果。只需将示例中的:last-of-type替换为:last-child即可。