Question

我不倾向于使用nth-child，因为我总是发现它令人困惑，但我想知道它是否可能针对某些孩子？

我有一个列表，我想仅针对1,3,5,8,10,12个元素，这可能与n-child有关吗？我使用了nth-tester（link），但没有运气......

<ul>
    <li>TARGET</li>
    <li>Item</li>
    <li>TARGET</li>
    <li>Item</li>
    <li>TARGET</li>
    <li>Item</li>
    <li>Item</li>
    <li>TARGET</li>
    <li>Item</li>
    <li>TARGET</li>
    <li>Item</li>
    <li>TARGET</li>
</ul>

如果不是可以用javascript做到这一点？

谢谢！

Answer 1

您可以使用多个:nth-child选择器，但无法将它们组合在一起。

ul li:nth-child(1), ul li:nth-child(3), ul li:nth-child(5), ... {
    /* styles */
}

Answer 2

最简单和最强大的方法是使用一个选择器列表，每个选择器都针对一个孩子：

li:nth-child(1), li:nth-child(3), li:nth-child(5), 
li:nth-child(8), li:nth-child(10), li:nth-child(12) { 
  /* declarations here */
}

可以构建一个更短的替代方案，但它看起来更加模糊。您可以使用数字少于7的所有奇数编号的子项作为目标，使用单独的选择器编制所有偶数编号为8的子编号：

li:nth-child(2n+1):not(:nth-child(n+7)),
li:nth-child(2n+8) {
  /* declarations here */
}

但是，这很难维护。例如，第二个选择器也会匹配第14项，因此如果追加新项目，则需要修改代码。

Answer 3

这应该可以帮助你使用CSS和jQuery：

http://jsfiddle.net/wildandjam/PzN9L/

ul li:nth-child(1){
    background:red;
}


$("ul li:nth-child(10)").addClass("number10");

Answer 4

试试这个

1,3,5,8,10,12  contain only target value.so you have to use **[contains][1]**

选择器

$( "ul li:contains('TARGET')" ).css( "text-decoration", "underline" );

Answer 5

您可以使用多个:eq选择器：

$('ul').find('li:eq(0), li:eq(2), li:eq(4),li:eq(7),li:eq(9),li:eq(11)');

Answer 6

你可以在html中进行黑客攻击：

<ul>
    <li>TARGET</li>
    <li>Item</li>
    <li>TARGET</li>
    <li>Item</li>
    <li>TARGET</li>
    <li>Item</li>
    <li style="display:none;">TARGET</li>
    <li>Item</li>
    <li>TARGET</li>
    <li>Item</li>
    <li>TARGET</li>
    <li>Item</li>
    <li>TARGET</li>
</ul>

的CSS：

li:nth-child(2n+1) {
    border: 1px solid #c00;
}

的 Example

使用nth-child CSS定位异常数字

6 个答案: