Question

我想像自己一样为自己创建一个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>

之后我想将Top Padding应用于First Child＆amp;底部填充到最后一个孩子。第一个孩子工作，但最后一个孩子没有...... 这是代码：

.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和任何最后一个 子项中应用填充。

底部填充不适用于Last-Child

1 个答案: