我在使用第一个孩子和最后一个孩子 CSS 选择器方面需要帮助答案

【问题标题】：I need help with using first-child and last-child CSS selectors我在使用第一个孩子和最后一个孩子 CSS 选择器方面需要帮助
【发布时间】：2011-03-17 06:48:16
【问题描述】：

我有一个嵌套在一行中的三列布局。我想在除最后一列之外的每一列的右侧添加一个边框。我还想删除左边的填充并用第一列的左边距替换它，并删除右边的填充并用最后一列的右边距替换它。我尝试使用 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>

【问题讨论】：

你能在中间列添加一个“mdl”类并且只对那个应用边距吗？
@Marcel，不是真的。这将是一个权宜之计，这不是我想要的。不管有多少列，我都想解决这个问题！

标签： html css css-selectors

【解决方案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;
}

【讨论】：

令人恼火的是，目前没有任何 IE 版本支持:last-child。 IE9 可以。 quirksmode.org/css/contents.html
@JamWaffles，有没有办法绕过这个限制？
好吧，您可以为 IE 制作另一个 css 表，并使用一些在线找到的 IE hack 来浏览它。
好吧，您可以在最后一行添加一个类并将其设置为没有填充或其他任何内容，或者您可以使用 jQuery... 总而言之，一些丑陋的东西。我每天都越来越讨厌 IE。
>崩溃并哭泣:-(

【解决方案2】：

如何设置所有列的样式并在右侧给容器负边距？

演示：jsfiddle.net/Marcel/aqmjn

【讨论】：

【解决方案3】：

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

这段代码参考了最后一个

<div>stuff</div>

。您正在引用您选择的 div 的子级。

你想要的是

.row:last-child

【讨论】：

-1 你误解了:*-child 伪类。它们描述了您附加它们的元素，而不是它的子元素。看到这个答案stackoverflow.com/questions/4195161/…