使用jquery作为css nth child的替代品

Question

我正在使用以下css创建具有chckerboard背景的列表项（每个其他列表项都有灰色背景，每行都会移动以创建棋盘图案：

li:nth-child(8n+2), li:nth-child(8n+4), li:nth-child(8n+5), li:nth-child(8n+7) {
    background-color:grey;
}

我有没有办法使用比css3更支持的jquery？感谢

Answer 1

简短回答：是的！

只需将其用作document.ready内的选择器，它就可以跨浏览器工作，如下所示：

$(function() {
  $("li:nth-child(8n+2), li:nth-child(8n+4), li:nth-child(8n+5), li:nth-child(8n+7)")
    .css('background-color','grey');
});

注意：这会在运行时运行，如果您正在动态添加/删除元素，则只需调用相同的选择器/ .css()。在这种情况下，我建议使用一个类，所以不是.css('background-color','grey')，而是.addClass('myClass')