Html 我需要帮助使用第一个孩子和最后一个孩子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;
}

<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>

#行{
}
.盒子{
右边框：1px点#e1e1；
保证金：0；
填充：0 10px；
宽度：139px；
}
#行分区：第一个孩子{
左侧填充：0；
左边距：10px；
}
#行分区：最后一个子行{
右边界：0；
右边距：10px；
右边填充：0；
}
第一个标题
东西
中间标题
东西
最后标题
东西

这是因为

行

是一个类而不是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;
}

这段代码引用了最后一段代码

<div>stuff</div>

---

将所有列设置为相同的样式，并在右侧为容器提供负边距怎么样

---

演示：

您能在中间的列中添加一个“

mdl

”类，并且只对该类应用边距吗？@Marcel，不太能。这将是一个权宜之计，这不是我想要的。无论列数多少，我都想解决这个问题！令人恼火的是，目前没有任何版本的IE支持

：last child

。IE9有@JamWaffles，有没有办法绕过这个限制？你可以为IE制作另一个css表单，并使用一些在线的IE黑客来导航。你可以在最后一行添加一个类，并将其设置为没有填充或其他内容，或者你可以使用jQuery。。。总之，一些丑陋的东西。我每天都越来越讨厌IE。>崩溃了，哭了<我再也受不了了。在这个悲惨的世界里，我不能用IE开发web>：-（-1）你误解了

：*-child

伪类。它们描述了你附加到它们的元素，而不是它的子元素。看到这个答案了吗

<div>stuff</div>

.row:last-child