n-child（）不起作用

我有一個關於nth-child()和nth-of-type()的問題，我已經嘗試了兩種變體，但都不起作用。這裏是我的代碼：n-child（）不起作用

#commentdamcherirounded:nth-child(odd) { 
    border-radius:4px; 
    -moz-border-radius:4px; 
    -o-border-radius:4px; 
    -webkit-border-radius:4px; 
    -khtml-border-radius:4px; 
    width:680px; 
    display:block; 
    margin-bottom:15px; 
    position:relative; 
    margin-top:-16px; 
    background-repeat:repeat-y; 
    background-color:red; 
} 
#commentdamcherirounded:nth-child(even) { 
    border-radius:4px; 
    -moz-border-radius:4px; 
    -o-border-radius:4px; 
    -webkit-border-radius:4px; 
    -khtml-border-radius:4px; 
    width:680px; 
    display:block; 
    margin-bottom:15px; 
    position:relative; 
    margin-top:-16px; 
    background-repeat:repeat-y; 
    background-color:yellow !important; 
}

來源

2013-08-18 Lobachevsky

您不應該有超過1個具有相同ID的元素！ –

我想只有一個，不是？除非我誤讀了'n-child'聲明......啊，看下面的http://stackoverflow.com/a/18301402/1091386是有啓發性的。 – icedwater

我也建議宣佈一次相同的樣式。只使用僞類聲明不同的背景。當您想要更改時更容易，例如，所有元素的寬度。 – LinkinTED

你似乎錯過了一個事實，即nth-child是一個僞選擇，加入到一個特定的選擇規則。這是它是如何通常用於：

ul li:nth-child(odd) { ... } 
ul li:nth-child(even) { ... }

在你的榜樣，:nth-child應用於ID選擇 - 它只是不會工作方式，因爲你不能比元素更與特定的ID在你的DOM 。

的解決方案取決於你真正需要的位置：它要麼換ID爲類要風格的元素，這代表在CSS規則：

.commentdamcherirounded:nth-child(odd) { ... } 
.commentdamcherirounded:nth-child(even) { ... }

...或移動ID一個提升等級（即，他們的父母）代替，那麼針對該元素的直接孩子，像這樣：

#commentdamcherirounded>:nth-child(odd) { ... }

注意區別>符號做：用一個簡單的空白，你實際上會推動這一nth-child規則應用於所有descenda NTS。

這裏的fiddle玩。

來源

2013-08-18 16:44:37 raina77ow

謝謝:)我會嘗試 – Lobachevsky

或者你可以試着指定'n-child（odd）'，因爲不適用的將是'n-child（even）'。這兩個規範之間似乎也有很多重疊，所以如果你將它細化，它可能看起來更乾淨。 – icedwater

改爲創建一個CSS類。

.commentdamcherirounded:nth-child(odd) { 
    border-radius:4px; -moz-border-radius:4px; 
    -o-border-radius:4px; -webkit-border-radius:4px; 
    -khtml-border-radius:4px; 
    width:680px; display:block; margin-bottom:15px; 
    position:relative; margin-top:-16px; 
    background-repeat:repeat-y; background-color:red; 
} 
.commentdamcherirounded:nth-child(even) { 
    border-radius:4px; -moz-border-radius:4px; 
    -o-border-radius:4px; -webkit-border-radius:4px; 
    -khtml-border-radius:4px; 
    width:680px; display:block; margin-bottom:15px; 
    position:relative; margin-top:-16px; 
    background-repeat:repeat-y; background-color:yellow !important; 
}

來源

2013-08-18 16:44:50

n-child（）不起作用

回答

相關問題