仅使用css在div中使用两种颜色为文本着色-需要技巧

好的，让我用另一个词改写我的问题，使它看起来清晰有趣：

我需要一个纯粹的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>

如果我们可以修改“zipcodeXXXXX”divs，对吗

---

谢谢。

只需对父元素和子元素应用不同的奇偶规则即可：

div[class^=“zipcode”]：第n个类型（奇数）。myclass:n个类型（奇数），
div[class^=“zipcode”]：第n个类型（偶数）。myclass:n个类型（偶数）{
颜色：红色；
}
div[class^=“zipcode”]：第n个类型（奇数）。myclass:n个类型（偶数），
div[class^=“zipcode”]：第n个类型（偶数）。myclass:n个类型（奇数）{
颜色：蓝色；
}

---

.

只需对父元素和子元素应用不同的奇偶规则：

div[class^=“zipcode”]：第n个类型（奇数）。myclass:n个类型（奇数），
div[class^=“zipcode”]：第n个类型（偶数）。myclass:n个类型（偶数）{
颜色：红色；
}
div[class^=“zipcode”]：第n个类型（奇数）。myclass:n个类型（偶数），
div[class^=“zipcode”]：第n个类型（偶数）。myclass:n个类型（奇数）{
颜色：蓝色；
}

---

.

您是否尝试过类似的方法：

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

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

---

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

您是否尝试过类似的方法：

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

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

---

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

好的，只针对那些想找到解决方案的人

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

这是一个解决方案：

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

---

Frédéric Hamidi解释了这种差异。

好的，只针对那些想找到解决方案的人

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

这是一个解决方案：

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

---

Frédéric Hamidi解释的差异。

JSFIDLE更新为，因此更清晰。谢谢。不，这在您当前的标记结构中是不可能的–第n个子元素选择器总是在其父元素的边界内查看元素。（提示在名称中…）在我决定在这里提问几个小时后，我就是这么想的：）JSFIDLE已更新为，因此更清晰。谢谢。不，这在您当前的标记结构中是不可能的–第n个子元素选择器总是在其父元素的边界内查看元素。（提示在名称中…）这是我花了几个小时才决定在这里提问的想法：）在我的情况下，我无法编辑html。zipced是我无法更改或修改的。这就是为什么我在寻找css解决方案。它存在吗？谢谢。请更新您的JSFIDLE链接，它链接到我的问题，而不是您的解决方案：）然而，似乎您找到了一个解决方案。让我再仔细检查几次：）@JamesDonnelly，你的新方法只是根据

.zipcode

是奇数子元素还是偶数子元素来切换奇数和偶数的颜色，但是如果

.myclass

元素的数量不是“正确”的，这仍然不会给出期望的结果。CBroe是对的吗？请看这里的第6和第7个字符串是蓝色的。似乎如果字符串的数量是偶数，它会打破它之后的顺序。我不能编辑html在我的情况下。zipced是我无法更改或修改的。这就是为什么我在寻找css解决方案。它存在吗？谢谢。请更新您的JSFIDLE链接，它链接到我的问题，而不是您的解决方案：）然而，似乎您找到了一个解决方案。让我再仔细检查几次：）@JamesDonnelly，你的新方法只是根据

.zipcode

是奇数子元素还是偶数子元素来切换奇数和偶数的颜色，但是如果

.myclass

元素的数量不是“正确”的，这仍然不会给出期望的结果。CBroe是对的吗？请看这里的第6和第7个字符串是蓝色的。似乎如果字符串的数目是偶数，它就在后面打破了顺序。