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来定位具有类产品的li的所有其他事件。

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

Answer 1

基本上，你不能用纯CSS3。第n个子选择器适用于元素选择器，而不是类。因此，li:nth-child(even)有效，但.product:nth-child(even)没有。

You will need jQuery实现这一目标。

Answer 2

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

这是怎么回事：

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

.spot {
    background: green;
}

可能最终看起来很奇怪的唯一故障就是当2点李彼此相邻时。我认为在其他所有情况下，现场应该看起来不错。

我还发现这在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 Fiddle demo

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

使用css3选择类的每个其他元素

3 个答案: