html - 选择类中的任何最后一个元素

Question

假设我有以下html：

<div class="container">
   <p>...</p>
   <div>...</div>
   <ol>...</ol>
   <p>...p</p>
</div>

我想将样式应用于container类中的最后一个元素。在上面的例子中，我想申请margin-bottom最后一个<p>. 请记住，最后一个元素并不总是<p>，它可以是任何东西。

我试过了

.container:last-child {
   margin-bottom: 0px;
}

但未应用该样式。有人可以指出我正确的方向吗？

标签： htmlcss

Answer 1

使用子组合器( >) 将规则应用于直接子*(通用选择器)，即:last-child.

注意：通用选择器 ( *) 可以省略，但我发现它更易于阅读。

.container > *:last-child {
   margin-bottom: 0px;
   border: 1px solid red;
}

<div class="container">
   <p>...</p>
   <div>...</div>
   <ol>...</ol>
   <p>...p</p>
</div>