帶孩子的CSS父div

我有一個父div，它包含三個div。他們基本上是專欄。我需要刪除的最後一個保證金，但不能得到正確的選擇 HTML：帶孩子的CSS父div

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

來源

2010-09-24 Dirty Bird Design

我已經在這裏發佈了一個類似的問題：http://stackoverflow.com/questions/3786434/last-child-psuedo-class-selector-in-css-and-internet-explorer – 2010-09-24 16:39:31

雖然你可以使用：最後一子選擇，它不會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; 
}

來源

2010-09-24 15:51:03 mikeocool

是的，我同意我仍然必須爲IE 7編碼，所以我必須這樣做。太糟糕了。 thx人。 – 2010-09-24 15:57:41

有趣的是，你說過我做過的同樣的事情，除了我五分鐘之後。但你得到的答案是：P – 2010-09-24 18:45:31

你可以這樣做：第一胎或：最後一個孩子瞄準第一個也是最後一個元素。

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

來源

2010-09-24 15:43:45

可以使用:last-child選擇的規則

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

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

來源

2010-09-24 15:44:54 Robert

我很確定這個尋找最後的.productContainer，而不是最後一個div。看到我的答案。 – idrumgood 2010-09-24 15:46:27

自@ idrumgood的評論以來，此答案已被編輯過嗎？ – 2010-09-24 15:48:37

.productContainter div:last-child

來源

2010-09-24 15:45:05 idrumgood

雖然知道這個-'：last-child'-不可用於IE <9. – 2010-09-24 15:46:28

爲什麼不.productContainer div：nth-child（3）以同樣的方式工作？由於IE瀏覽器，我可能只需要添加一個類到最後一個。 – 2010-09-24 15:50:43

您可以在此情況下，使用last-child僞選擇...

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

注意：這不適用於IE8及更高版本，因爲這是CSS3的一部分。對於一些更便攜，你可能想試試這個...

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

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

來源

2010-09-24 15:45:23

帶孩子的CSS父div

回答

相關問題