css - 使用css3选择类的所有其他元素

Question

给定一个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 来针对每个其他出现的 ali类产品。

我尝试在各种配置中同时使用 nth-of-child 和 nth-of-type 都没有运气，无论类是否具有，两者似乎都针对所有其他 li 元素。

Answer 1

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

您将需要 jQuery来实现这一点。

Answer 2

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

这怎么样：

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

.spot {
    background: green;
}

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

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

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

Answer 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 小提琴演示。

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