css属性last-child和last-of-type区别

last-of-type 先定义元素，再找最后一个

last-child 先定义最后一个，再找元素，如果说最后一个和所要找元素对不上就没有效果，对的上就有效果

last-of-type 先定义元素，再找最后一个

last-child 先定义最后一个，再找元素，如果说最后一个和所要找元素对不上就没有效果，对的上就有效果

last-child和last-of-type是CSS中用于选择最后一个子元素的伪类选择器，它们的区别在于：

last-child选择的是最后一个子元素，无论它是什么类型的元素。 last-of-type选择的是最后一个指定类型的元素，不考虑它是不是子元素。 举个例子，假设有如下HTML结构：

html

css /* 选择最后一个子元素 */ div p:last-child { color: red; }

/* 选择最后一个段落元素 */ div p:last-of-type { color: blue; } 这里div p:last-child会选择最后一个子元素另一个span元素，而div p:last-of-type会选择最后一个段落元素

第三个段落

因此，last-child和last-of-type的选择器应用场景不同，需要根据实际情况选择合适的选择器。

last-child和last-of-type都是CSS3中的伪类选择器，用于选择同种类型下的最后一个元素。

不同之处在于：

1. last-child会选择所有同种类型下的最后一个元素，无论它们的位置如何。而last-of-type只会选择同种类型下的位置在父元素中最后的那个元素。

2. 如果一个元素同时具有last-child和last-of-type属性，那么last-child将优先于last-of-type。

举个例子：

<ul class="list">
  <li>Apple</li>
  <li>Banana</li>
  <li>Cherry</li>
  <li>Durian</li>
</ul>

/* 选择Li元素列表中最后一个*/
li:last-child {
  color: red;
}

/* 选择Li元素列表中最后一个指定类型的*/
li:last-of-type {
  color: orange;
}

输出结果为：

<ul class="list">
  <li>Apple</li>
  <li>Banana</li>
  <li>Cherry</li>
  <li style="color: orange;">Durian</li>
</ul>

last-child 和 last-of-type 都是 CSS 选择器中的伪类（pseudo-class）。它们可以用来选中元素的最后一个子元素或者同类的元素。它们的区别在于：

• last-child：选中元素的父级元素中最后一个子元素，无论子元素的类型是什么。即选中其父级元素中的最后一个子元素，无论其子元素类型如何。

• last-of-type：选中其父级元素中最后一个符合指定类型的子元素，只能选中父元素中符合指定类型的子元素中的最后一个。它是结合元素的标签名称来查找上级元素的最后一个子元素。

举个例子，假设有以下 HTML 结构：

<div>
  <p>第一个段落</p>
  <p>第二个段落</p>
  <span>第一个 span 元素</span>
  <p>第三个段落</p>
  <span>第二个 span 元素</span>
  <p>第四个段落</p>
  <span>第三个 span 元素</span>
</div>

当使用 last-child 选择器时，选中的是 div 元素中的最后一个子元素，也就是最后一个 span 元素。

当使用 last-of-type 选择器时，选中的是 div 元素中的最后一个符合指定类型的子元素，即最后一个 span 元素。

所以，如果要选中父级元素中的最后一个指定类型的子元素时，应该使用 last-of-type 选择器；如果要选中父级元素中的最后一个子元素时，无论其类型是什么，应该使用 last-child 选择器。

CSS属性last-child和last-of-type都是选择器，它们的作用是找到一组元素中的最后一个元素。它们的区别在于：

last-child选择器匹配一组元素中的最后一个子元素，无论该子元素是什么类型。例如，如果您使用ul li:last-child选择器，它会选中一个ul元素下的最后一个子元素li。

last-of-type选择器匹配一组元素中的最后一个指定类型的元素。例如，如果您使用ul li:last-of-type选择器，它会选中一个ul元素中的最后一个li元素。

因此，last-child和last-of-type的主要区别在于它们匹配元素的方式不同。last-child匹配任何类型的最后一个子元素，而last-of-type仅匹配特定类型的最后一个元素。

CSS中的last-child和last-of-type属性用于选择文档中最后一个匹配特定选择器的元素。它们的主要区别在于:

1、last-child属性选择最后一个直接子元素。如果一个元素有多个直接子元素，那么last-child属性只会选择最后一个。

2、last-of-type属性选择最后一个匹配选择器的元素，无论是哪个类型的元素。如果一个元素有多个匹配选择器的元素，那么last-of-type属性只会选择最后一个。