使用css3选择类的所有其他元素答案

【问题标题】：Select every other element of class using css3使用css3选择类的所有其他元素
【发布时间】：2012-04-30 00:51:52
【问题描述】：

给定一个具有如下结构的ul：

<ul>
    <li class="product">...</li>
    <li class="product">...</li>
    <li class="product">...</li>
    <li class="product">...</li>
    <li class="spot">...</li>
    <li class="product">...</li>
    <li class="product">...</li>
</ul>

有什么方法可以使用 CSS3 来针对每个其他出现的 li 与类产品。

我尝试在各种配置中同时使用 nth-of-child 和 nth-of-type 都没有成功，无论类是什么，它们似乎都针对所有其他 li 元素。

【问题讨论】：

你能举一个你试过的例子吗？
stackoverflow.com/questions/5080699/…的可能重复
@JonathanSampson：他想要所有偶数（或奇数）.products，而不仅仅是所有偶数（或奇数）<li>s。
@JonathanSampson 我想选择具有特定类的所有其他元素
@JonathanSampson：鉴于我们在提供答案时遇到的困难，似乎...

标签： css

【解决方案1】：

基本上，您不能使用纯 CSS3。 nth-child 选择器作用于元素选择器，而不是类。所以，li:nth-child(even) 有效，但 .product:nth-child(even) 无效。

You will need jQuery 来实现这一点。

【讨论】：

这完全可以用 jQuery 实现，但它不是“必需的”。
好点 - jQuery 不是必需的 - 但 JavaScript 会。

【解决方案2】：

是否可以通过覆盖 spot 并选择其他所有 li 来解决您的问题（就像其他人提到的那样）？此外，您可以按类名选择 ul。

这是怎么回事：

.ul_class li:nth-child(even) {
    background: #CCC;
}

.spot {
    background: green;
}

唯一可能看起来很奇怪的故障是当 2 个点 li 彼此相邻时。我认为在其他所有情况下，斑点都应该看起来不错。

我还发现这在 chrome 中运行良好：

li.product:nth-child(even) {
    background: #ccc;
}

【讨论】：

【解决方案3】：

这不能用纯 CSS（以我还知道的任何方式）完成，但是纯 JavaScript 解决方案非常简单：

var lis = document.querySelectorAll('li.product');

for (var i=0,len=lis.length;i<len;i++){
    if (i%2 == 0){
        lis[i].className = 'oddProduct';
    }
}

JS Fiddle demo.

可以使用 jQuery 代替（大概可以使用任何 other JavaScript 库），但它肯定不是必需的。

【讨论】：

不，他正在寻找的是只考虑那些有班级的人。因此，在他的示例 html 中，它将是元素 1,3 和 6（跳过了 .spot）。 nth-child 将匹配 1,3,7。他想要的是 jquery 中的:even 所做的。不要以为你可以用纯 css 做到这一点。
@HansSkov，抱歉，我无法提出纯 CSS 解决方案，但我发布的 JavaScript 版本确实有效。我只是希望它对你有用... =/
@DavidThomas 感谢您的努力，似乎 JavaScript 是唯一的出路。我会给你信用，因为你是第一个答案