我需要使用第一個和最后一個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;
}

Answer 2

將所有列樣式設置為相同，並在右側為容器提供負邊距怎么辦？

演示： jsfiddle.net/Marcel/aqmjn

Answer 3

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

此代碼塊參考了最后一個

<div>stuff</div>

。 您引用的是所選div的子級。

你想要的是

.row:last-child