CSS：父母的最后一个孩子答案

【问题标题】：CSS: last-child of parentCSS：父母的最后一个孩子
【发布时间】：2017-01-24 13:42:37
【问题描述】：

:last-child 在所有“子”元素都相同（即：所有 <p> 或所有 <li> 并且规则适用于该类型的子元素时）效果很好。

但是如何使用 CSS 来选择包含不同元素的父元素中的最后一个“子”元素？

例如，在本例中，我如何将规则应用于.parent 以选择其中的最后一个对象（div）？

.parent:last-child {
  background-color: red;
 }

<div class="parent">
  
  <p>First child</p>
  <input type="text" placeholder="Second child" />
  <div>Third child</div>
  
</div>

【问题讨论】：

【解决方案1】：

您可以使用.parent > *:last-child 或只使用.parent > :last-child

星号 (*) 是 CSS 的通用选择器。它匹配单个任何类型的元素。用简单的选择器省略星号有效果一样。

.parent > *:last-child {
  background-color: red;
}

<div class="parent">
  <p>First child</p>
  <input type="text" placeholder="Second child" />
  <div>Third child</div>
</div>

【讨论】：