Question

使用jQuery，我想知道如何设置特定列表项的样式？

例如，我想设置第一个<li>（第一个孩子）来赋予它自己的风格，然后给下一个五个列表项继承自己的风格，然后接下来五个自己的风格等等。

我很久以前读过一些关于:nth的内容，但对此并不十分了解。这很容易实现吗？

Answer 1

nth-child允许您提供一个表达式，该表达式经过评估以提供一组元素。您可以提供的最简单的表达式只是一个数字（例如nth-child(3)），它将该样式应用于第三个孩子。

您可以使用3n这样的表达式将样式应用于每个第3个孩子，甚至可以使用odd或even将样式应用于（显然）每个奇数甚至是孩子。

但是，我不认为你可以使用它将样式应用于多个元素的重复块（例如，单向样式5元素，下一个5元素）和单个表达式。

Answer 2

Google帮助很多：http://css-tricks.com/how-nth-child-works/

ul li:nth-child(5) {
  color: #ccc;
}

或jQuery：http://api.jquery.com/nth-child-selector/

$("ul li:nth-child(5)").css("color", "#ccc");

设置LI组的样式：

$(document.body).click(function () {
  $("ul li").each(function (index) {
    // This will get the remainder of the division of the li index by 10
    var groupNum = index % 10;

    // Style groups of 5 LIs differently
    if (groupNum<5) {
      $(this).css("color", "#ccc");
    } else {
      $(this).css("color", "#222");
    } 
  });
});

没有经过测试，但它应该会给你一个想法。

CSS如何设置特定<li>？</li>的样式

2 个答案: