css中’last-child‘和’last-of-type‘有什么区别

在CSS中，last-child和last-of-type选择器有一些差异：让我们探讨这些差异，并为每个差异提供详细示例：

1. last-child：

   • :last-child选择器以作为其父级的子元素的最后一个元素为目标。
   • 它选择其同级元素类型中任何元素类型的最后一次出现。
   • 它是一个结构伪类，用于根据其与父级和同级内容的关系设置内容的样式。
   • 例：

   .article p:last-child {
     color: red;
   }

 

此选择器将选择作为文章元素子元素的最后一个段落元素，并应用指定的样式。

2. last-of-type：

   • :last-of-type选择器以一组同级元素中其类型的最后一个元素为目标。
   • 它选择特定元素类型在其父元素中的最后一次出现。
   • 例：

   div p:last-of-type {
     color: blue;
   }

 

此选择器将选择作为 div 元素子元素的最后一个段落元素并应用指定的样式。

以下是需要考虑的一些要点：

• :last-child选择器选择其父元素的最后一个子元素，而不考虑元素类型。
• :last-of-type选择器在其同级元素中选择特定类型的最后一个元素，而不管它是否是最后一个子元素。
• 如果在指定类型的最后一个元素之后有附加元素，则:last-child选择器不会选择它，而:last-of-type选择器会选择它。
• :last-of-type选择器比:last-child选择器更具体。
• 这两个选择器可以与其他选择器、伪类和伪元素结合使用，以创建更复杂的样式规则。

以下是搜索结果中的示例，以说明差异：

/* Example for :last-child */
div :last-child {
  color: red;
}

 

此选择器将面向 div 的最后一个子元素，而不考虑元素类型。

/* Example for :last-child */
div p:last-child {
  color: red;
}

 

此选择器将针对作为 div 子元素的最后一个段落元素，并应用指定的样式。

/* Example for :last-of-type */
div h1:last-of-type {
  color: blue;
}

 

此选择器将针对作为 div 子元素的最后一个 h1 元素，并应用指定的样式。

/* Example for :last-of-type */
li:last-of-type {
  color: red;
}

 

此选择器将定位其父元素中的最后一个 li 元素并应用指定的样式。

理解这两个选择器之间的区别很重要，以便根据需求应用正确的样式。