Question

你好Fellas我正在尝试在我的代码中使用nth-child但是它不能正常使用我的代码

HTML

<ul class="colour" >
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li>one</li>
    <li>two</li>
    <li>three</li>
  </ul>

的jQuery

$(document).ready(function(e) {
    $('.colour ul li:nth-first-child(1)').css('color','pink');
});

我不知道为什么它不起作用PLZ帮助人

Answer 1

nth-first-child不是伪选择器，nth-child是。

您还选择了.colour ul，它会查找ul，它是类.colour元素的后代。这不适用于您的标记。您只需要.colour或ul.colour。

在回复您的评论时，您希望在该方案中使用nth-last-child，该方案确实存在。 Demo

Answer 2

您应该使用以下内容：

$(document).ready(function(e) {
    $('.colour ul li:nth-last-of-type(2)').css('color','pink');
});

这将选择倒数第二个元素。这是more tutorial.

Answer 3

除了上面已经很棒的答案之外，如果这些li项目的数量保持不变，您可以使用eq。

<ul class="color">
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>

和JS：

//The indexing starts from 0, like in arrays
$('.color li:eq(0)').css('color', 'pink');

因此，可以将第二个最后一个访问为：

$('.color li:eq(5)').css('color', 'pink');

只需2美分！

Answer 4

如果您想要对最后一个<li>进行样式化，可以使用：

$(document).ready(function(e) {
    $('.colour li:nth-last-child(2)').css('color','pink');
});