CSS第一胎未正常工作

我用下面的CSS嘗試去除與類的元素，被稱爲「tblRow」CSS第一胎未正常工作

.tblRow div:first-child{ 
    border-left: none; 
}

<div class="tbl"> 
    <div class="tblRow"> 
    <div class="tblCell">Lower limit QTY</div> 
    <div class="tblCell">Upper Limit</div> 
    <div class="tblCell">Discount</div> 
    </div> 
    <div class="tblRow"> 
    <div class="tblCell">1</div> 
    <div class="tblCell">5</div> 
    <div class="tblCell">25%</div> 
    </div> 
</div>

的第一個孩子DIV左邊框

這隻會刪除第一行中第一個子div的左邊框。它不會在第二行中刪除它。有任何想法嗎？

來源

2013-06-05 Julian Dormon

這應該工作。這可能是一個特殊的東西，但。你能發表你的風格，增加了左邊界嗎？ – zakangelle

它在這裏工作得很好：http://jsfiddle.net/SFRTj/1/ – Adrift

而且[這裏也是：http://jsfiddle.net/davidThomas/E397e/](http://jsfiddle.net/davidThomas/E397e /）。 –

我通常只使用：first-child和：n-psuedo選擇器，當我幾乎不能控制元素或者他們被動態填充時，我不能依賴訂單。此外，因爲：nth-child是CSS3，所以不能依賴於完整的瀏覽器兼容性。如果你沒有這個僞選擇器，我的建議是爲此創建一個輔助類。

.tblCell.firstCell{ 
border-left: none; 
} 

<div class="tbl"> 
    <div class="tblRow"> 
    <div class="tblCell firstCell">Lower limit QTY</div> 
    <div class="tblCell">Upper Limit</div> 
    <div class="tblCell">Discount</div> 
    </div> 
    <div class="tblRow"> 
    <div class="tblCell firstCell">1</div> 
    <div class="tblCell">5</div> 
    <div class="tblCell">25%</div> 
    </div> 
</div>

來源

2013-06-05 20:09:14 iGanja

它似乎在小提琴上工作，所以你可能有一個（隱藏）文本節點的地方。因此，如果可能的話，我建議使用.tblRow div:first-of-type { ... }，從瀏覽器支持的角度來看。

來源

2013-06-05 20:02:48 zvona

文本節點除'：empty'之外不影響CSS;特別是因爲只有元素會被'：first-child'僞選擇符匹配。不過，可能還有其他元素。 –

CSS第一胎未正常工作

回答

相關問題