CSS：父母的最后一個孩子

Question

:last-child當所有“children”元素相同時（即：所有<p>或所有<li> ）並且該規則適用於該類型的子元素時， :last-child工作得很好。

但是，我如何使用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

星號（*）是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>