第n個孩子，我有一個CSS問題之前

，我需要做到這一點第n個孩子，我有一個CSS問題之前

article div#comments-wrapper ul.sub-comment:before { 
    width:1px; 
    height:67px; 
    background-color:#e4e4e4; 
    position:absolute; 
    margin-left:-595px; 
    margin-top:-36px; 
    content:''; 
} 
article div#comments-wrapper ul.sub-comment:nth-child(1):before { 
    height:37px; 
    margin-top:-6px; 
}

，但我不能把兩個僞元素那樣，我已經測試過它（不工作），也嘗試了一些其他方法，但沒有設法弄清楚。

來源

2012-03-23 Kristjan

我敢肯定的作品。你到底面臨什麼問題？ – BoltClock 2012-03-23 21:47:50

這是有效的，但是當前的實現可能無法正確解釋它。 – jwueller 2012-03-23 21:49:21

以下作品：http://jsfiddle.net/9KkeK/。所以你的問題在別處。 – 2012-03-23 21:50:42

:nth-child()不會按類或任何東西進行過濾。在您的代碼中，您的第一個ul.sub-comment不是#comments-wrapper中的第一個孩子，所以它不起作用。

相反，使用this selector technique和反轉的height和margin-top方式如下：

article div#comments-wrapper ul.sub-comment:before { 
    width:1px; 
    height:37px; /* was 67px in your code */ 
    background-color:#e4e4e4; 
    position:absolute; 
    margin-left:-595px; 
    margin-top:-6px; /* was -36px in your code */ 
    content:''; 
} 
article div#comments-wrapper ul.sub-comment ~ ul.sub-comment:before { 
    height:67px; /* was 37px in your code */ 
    margin-top:-36px; /* was -6px in your code */ 
}

基本上，而不是:nth-child(1)（或:first-child爲此事），使用兄弟選擇與另一個ul.sub-comment申請原來的樣式以後的所有ul.sub-comment元素之後的第一個。

Updated fiddle（也倒了background-color樣式，以便第一個呈藍色）

來源

2012-03-23 22:09:14 BoltClock

非常感謝！ :) – Kristjan 2012-03-23 22:12:00

第n個孩子，我有一個CSS問題之前

回答

相關問題