0

我有一个关于nth-child()and的问题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;
}
4

2 回答 2

4

您似乎错过了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规则推进到所有后代。

这是小提琴玩。

于 2013-08-18T16:44:37.987 回答
0

而是创建一个 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-18T16:44:50.490 回答