html - 我需要有关使用 first-child 和 last-child CSS 选择器的帮助

Question

我有一个嵌套在一行中的三列布局。我想在除最后一列之外的每一列的右侧添加边框。我还想删除左侧填充并将其替换为第一列的左边距，并删除右侧填充并将其替换为最后一列的右边距。我尝试使用 first-child 和 last-child 选择器，但它们不起作用。

谁能指出我正确的方向？

#row {
}

.box {
    border-right: 1px dotted #e1e1e1;
    margin: 0;
    padding: 0 10px;
    width: 139px;
}

#row div:first-child {
    padding-left: 0;
    margin-left: 10px;
}

#row div:last-child {
    border-right: 0;
    margin-right: 10px;
    padding-right: 0;
}

<div class="row">

    <div class="box">
        <h3>First Title</h3>
        <div>Stuff</div>
    </div>

    <div class="box">
        <h3>Middle Title</h3>
        <div>Stuff</div>
    </div>

    <div class="box">
        <h3>Last Title</h3>
        <div>Stuff</div>
    </div>

</div>

Answer 1

这是因为 row 是一个类而不是一个 id。将您的 CSS 更改为:

.row {
}

.box {
    border-right: 1px dotted #e1e1e1;
    margin: 0;
    padding: 0 10px;
    width: 139px;
}

.row div:first-child {
    padding-left: 0;
    margin-left: 10px;
}

.row div:last-child {
    border-right: 0;
    margin-right: 10px;
    padding-right: 0;
}