Question

我有一个关于nth-child()和nth-of-type()的问题，我尝试了两种变体，但都不起作用。这是我的代码：

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

Answer 1

您似乎错过了nth-child是一个伪选择器，添加到特定选择器规则的事实。这就是它通常使用的方式：

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

在您的示例中，:nth-child应用于ID选择器 - 它不会以这种方式工作，因为您的DOM中不能包含具有特定ID的元素。

解决方案取决于您真正需要的内容：它要么为要设置样式的元素交换类的ID，要么在CSS规则中表示：

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

...或者将ID向上移动一级（即，向其父级移动），然后定位该元素的直接子级，如下所示：

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

请注意差异>符号：使用简单的空格，您实际上会将此nth-child规则推进到所有后代。

这里是fiddle。

Answer 2

改为创建一个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;
}

nth-child（）不起作用

2 个答案: