Question

好的，让我用另一个词重写我的问题，看起来很清楚有趣：jsFiddle

我需要一个纯css解决方案，根据线条是奇数还是偶数来着色颜色中的文本行。

代码的例子可能是：

<div class="main">
    <div class="zipcode12345">
        <div class="myclass">red with css</div>
        <div class="myclass">blue with css</div>
        <div class="myclass">red with css</div>
        <div class="myclass">blue with css</div>
        <div class="myclass">red with css</div>
    </div>
    <div class="zipcode23456">
        <div class="myclass">blue with css</div>
    </div>
    <div class="zipcode90033">
        <div class="myclass">red with css</div>
        <div class="myclass">blue with css</div>
        <div class="myclass">red with css</div>
    </div>
    <div class="zipcode11321">
        <div class="myclass">blue with css</div>
        <div class="myclass">red with css</div>
        <div class="myclass">blue with css</div>
        <div class="myclass">red with css</div>
    </div>
</div>

有可能用css制作吗？如您所见@ jsFiddle，它没有按预期着色。

所以，主要的div是＆＃34; main＆＃34;。正如您所见，内部div始终具有格式＆＃34; zipcodeXXXXX＆＃34;的类名称。 zipcodeXXXXX的数量是可变的，myclass的数量是可变的。但是，奇数行应始终为红色，偶数行应始终为蓝色。是否存在纯css解决方案？

那将是一种

.myclass:nth-child(2n+1){
 color:red;
}
.myclass:nth-child(2n){
 color:blue;
}

如果我们可以igonre "zipcodeXXXXX" div，对吧？

谢谢。

Answer 1

只需将不同的奇数/偶数规则应用于父元素以及子元素：

div[class^="zipcode"]:nth-of-type(odd) .myclass:nth-of-type(odd),
div[class^="zipcode"]:nth-of-type(even) .myclass:nth-of-type(even) {
    color: red;
}

div[class^="zipcode"]:nth-of-type(odd) .myclass:nth-of-type(even),
div[class^="zipcode"]:nth-of-type(even) .myclass:nth-of-type(odd) {
    color: blue;
}

JSFiddle demo

Answer 2

你有没有试过这样的事情：

.myclass:nth-of-type(odd) {
    color: red;
}

.myclass:nth-of-type(even) {
    color: blue;
}

我刚刚使用了@James Donnelly提供的代码。

Answer 3

好的，仅适用于想要找到解决方案的人。

这不是解决方案（猜猜为什么？ - 与上面的css解决方案相同）：

jQuery(".main .myclass:nth-child(odd)").css('color', 'blue');

这是一个解决方案：

jQuery(".main .myclass:odd").css('color', 'blue');

FrédéricHamidi解释here的差异。

使用css的两种颜色的div中的彩色文本 - 棘手

3 个答案: