使用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来定位li类产品的每个其他出现.

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

Answer 1

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

你需要jQuery来实现这一目标.

Answer 2

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

\n\n

var\xe2\x80\x8b lis = document.querySelectorAll(\'li.product\');\n\nfor (var i=0,len=lis.length;i<len;i++){\n    if (i%2 == 0){\n        lis[i].className = \'oddProduct\';\n    }\n}\xe2\x80\x8b\n

\n\n

JS 小提琴演示。

\n\n

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

\n