底部填充不适用于 Last-Child

Question

我想像 bootstrap 一样为自己创建一个 Jumbotron。我编写了 HTML 代码：

<div class="jumbotron">
    <div class="title">Rojbas Framework !</div>
    <div>This Roj Framework !</div>
    <div>
        <button type="button" class="btn btn-primary">More Info</button>
    </div>
</div>

之后，我想将顶部填充应用到第一个孩子并将底部填充应用到最后一个孩子。第一个孩子有效，但最后一个孩子不... 这是代码：

.jumbotron:last-child {
    padding-bottom: 40px;}

Answer 1

将填充应用于此结构中的最后一个 div。

<div class="jumbotron">
    <div class="title">Rojbas Framework !</div>
    <div>This Roj Framework !</div>
    <div>
        <button type="button" class="btn btn-primary">More Info</button>
    </div>
</div>

选择器应该是

.jumbotron >:last-child {
    padding-bottom: 40px;}

注意：

.jumbotron :last-child {
    padding-bottom: 40px;}

将对.jumbotron 元素内的最后一个 div 和 any 最后一个 however 子元素应用填充。