Question

更新：我发布的小提琴链接现在有工作代码。 :not(:last-child)和:nth-last-child(n + 2)都完美无缺。

我正在尝试使用nth-child或nth-last-child选择器来选择li中除最后一个ul之外的每个ul。问题是，列表的长度可以从1到5个元素不等。我无法找到任何文档或如何实现此目的的示例。

以下是<ul class="breadcrumbs"> <li> <a href="/">Home</a> </li> <li> <a href="/categories/1">Articles</a> </li> <li> <a href="/categories/6">Specials</a> </li> <li class="current"> <a href="/categories/6/articles/21">Song Lyrics</a> </li> </ul>的HTML：

ul > li:nth-last-child(-1n+4) > a:hover {
  color: red;
}

这是我目前的代码：

ul > li:nth-child(1):nth-last-child(2) > a:hover {
  color: red;
}

此代码仍然选择列表中的最后一个元素。我也试过下面的代码，但是没有选择任何东西。我也尝试了许多其他组合，但它们要么根本不起作用，要么选择了最后一个元素。

{{1}}

Here is a fiddle

Answer 1

使用:not(:last-child)定位除最后一个之外的所有内容。

http://jsfiddle.net/96nd71e3/1/

Answer 2

使用:nth-last-of-type或:nth-last-child

http://jsfiddle.net/t0k8gp4d/

li:nth-last-of-type(n + 2) a {
    color: red;
}

<ul class="breadcrumbs">
    <li>
        <a href="/">Home</a>
    </li>
    <li>
        <a href="/categories/1">Articles</a>
    </li>
    <li>
        <a href="/categories/6">Specials</a>
    </li>
    <li class="current">
        <a href="/categories/6/articles/21">Song Lyrics</a>
    </li>
</ul>

Answer 3

您可以使用此

<ul class="breadcrumbs">
    <li>
        <a href="/">Home</a>
    </li>
    <li>
        <a href="/categories/1">Articles</a>
    </li>
    <li>
        <a href="/categories/6">Specials</a>
    </li>
    <li class="current">
        <a href="/categories/6/articles/21">Song Lyrics</a>
    </li>
</ul>

CSS

ul > li{
background:red;
}
ul > li:last-child{
background:black;
}

但如果您绝对需要在主要li元素之外更改其样式，请使用此

ul > li{
background:black;
}
ul > li:not:last-child{
background:red;
}

CSS nth-child在长度未知时选择除最后一个元素之外的所有元素

3 个答案: