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

【问题标题】：Target unusually numbers with nth-child CSS使用 nth-child CSS 定位异常数字
【发布时间】：2014-06-20 16:10:44
【问题描述】：

我不倾向于使用nth-child，因为我一直觉得它令人困惑，但我想知道它是否可以针对某些儿童？

我有一个列表，我想只定位 1,3,5,8,10,12 元素，这对 nth-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 来做到这一点？

谢谢！

【问题讨论】：

从任何角度来看，这都不是一个系列......
你必须使用多个选择器。还有其他共同属性吗？获得这些数字的原因是什么？
查看jsfiddle.net/zFk67

标签： javascript jquery html css css-selectors

【解决方案1】：

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

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

【讨论】：

【解决方案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 个项目，因此如果添加了新项目，则需要修改代码。

【讨论】：

【解决方案3】：

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

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

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


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

【讨论】：

【解决方案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" );

【讨论】：

【解决方案5】：

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

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

【讨论】：

值得注意的是，这个答案仅适用于 jQuery 而不是 CSS。
他说他想用 CSS 做，然后又问“如果没有，我可以用 JS 做吗？”
但是使用 CSS 是可能的...！
@Barmar：哦，它有问题的标题......没看到：P

【解决方案6】：

你可以在 html 中做一个 hack：

<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

【讨论】：

它将在 css 中定位，但不会可见。所以在这种情况下，可见的目标元素将是：1,3,5,8,10,12。否则它将是：1,3,5,7,9,11.
这是个糟糕的主意。你隐藏了元素，所以你的代码可以工作！？