Question

我有一个父div，它有三个div。它们基本上是列。我需要删除最后一个边距，但无法获得正确的选择器 HTML：

<div class="productContainer">
    <div class="productBox"></div>
    <div class="productBox"></div>
    <div class="productBox"></div>
 <!--/ productContainer --></div>

这是CSS：

.productContainer {
    width: 980px;
    height: 400px;
    display: block;
    float: left;
}

How do you target the third child div of a parent? this should work no?
.productContainer > .productBox {
    width: 320px;
    height: 400px;
    display: block;
    float: left;
    margin: 0 10px 0 0;
}

.produtContainer > .productBox nth:child(3) {
    margin-right: 0;
}

Answer 1

.productContainter div:last-child

Answer 2

虽然你可以使用：last-child选择器，但它在8之前的任何版本的IE中都无法工作。一般来说，我在这种情况下做的是将最后一个类添加到列表中的最后一个元素：

<div class="productContainer">
<div class="productBox"></div>
<div class="productBox"></div>
<div class="productBox last"></div>

然后在样式表中的.productContainer .productBox规则下添加此规则：

.produtContainer .last {
margin-right: 0;
}

Answer 3

您可以：第一个孩子或：最后一个孩子来定位第一个和最后一个元素。

兼容性：http://www.quirksmode.org/css/contents.html

Answer 4

您可以使用:last-child选择器作为规则

.productContainer div:last-child
{
    // rule
}

http://www.quirksmode.org/css/firstchild.html

Answer 5

在这种情况下，你可以使用last-child伪选择器......

.productContainer > .productBox:last-child {
  margin-right: 0;
}

注意：这在IE8及更早版本中不起作用，因为这是CSS3的一部分。对于更便携的东西，你可能想试试这个......

<div class="productBox last"></div>

.productContainer > .productBox.last {
  margin-right: 0;
}

带有孩子的CSS父div

5 个答案: