使用:last-child无法选中最后一个div，如何不额外加class解决？

一、不添加额外class的解决方法 #

问题出在:last-child的匹配规则：它要求目标元素必须是父元素的最后一个子元素（无论类型）。如果你的div父元素（比如body）末尾还有其他非div元素（如<script>），div:last-child就会失效。

改用:last-of-type选择器即可，它会匹配父元素中所有div类型子元素里的最后一个，不受其他类型元素影响：

div:first-child {
  background-image: linear-gradient(purple, violet);
}

div:last-of-type {
  background-image: linear-gradient(45deg, yellow, black);
}

对应的HTML无需修改：

<div>first div</div>
<div>second div</div>
<div class="box">third div</div>
<div id="color">fourth div</div>
<div>fifth div</div>

二、使用parent类包裹的实现方式 #

如果想避免全局div选择器影响其他页面元素，可以给所有目标div添加一个父容器，设置class为parent，再通过后代选择器精准匹配：

HTML结构 #

<div class="parent">
  <div>first div</div>
  <div>second div</div>
  <div class="box">third div</div>
  <div id="color">fourth div</div>
  <div>fifth div</div>
</div>

CSS样式 #

如果parent容器内最后一个子元素就是div，直接用:last-child即可：

.parent div:first-child {
  background-image: linear-gradient(purple, violet);
}

.parent div:last-child {
  background-image: linear-gradient(45deg, yellow, black);
}

如果parent容器内末尾可能存在其他非div元素，依然推荐用:last-of-type保证兼容性：

.parent div:first-child {
  background-image: linear-gradient(purple, violet);
}

.parent div:last-of-type {
  background-image: linear-gradient(45deg, yellow, black);
}

内容的提问来源于stack exchange，提问作者Rexsaa Gater