我需要帮助使用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;
}