html - CSS: parent 的最后一个 child

Question

: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>

Answer 1

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

An asterisk (*) is the universal selector for CSS. It matches a single element of any type. Omitting the asterisk with simple selectors has the same effect.

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

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