CSS nth-child 选择所有元素除了最后一个，当元素数量未知时。

Question

更新：我发布的 JSFiddle 链接现在有可工作的代码了。 :not(:last-child) 和 :nth-last-child(n + 2) 都可以完美地实现。

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

这是 ul 的 HTML 代码：

<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>

这是我的当前代码：

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

这段代码仍然选择列表中的最后一个元素。我也尝试了下面的代码，但它没有选择任何内容。我还尝试了许多其他组合，但要么完全不起作用，要么选择了最后一个元素。

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

这里有一个 JSFiddle。

- Daniel Bonnell

---

为什么不为li设置基本样式，然后使用li:last-child仅针对最后一个进行目标定位？不应该需要使用任何' nth-child '来完成您所需的操作。 - Jesse Kernaghan

我正在使用Foundation，因此样式大多定义在sass文件中，但这个特定方面不是标准选项以进行自定义，因此我在覆盖sass文件中包含了一个自定义选择器。 - Daniel Bonnell

Answer 1

使用:not(:last-child)来选择除最后一个元素之外的所有元素。

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

- nickford

---

即使在fiddle上也无法工作，“red”被忽略了。 - Michael Rogers

红色样式仅应用于除最后一个之外的所有行链接的悬停状态。当我将光标悬停在前4个链接上时，它们会变成红色。 - nickford

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>

- Joseph Marikle

---

@某个用户（他删除了评论）很遗憾，这就是我所拥有的全部内容。我部分地理解它的工作原理，但我无法给出确切准确的解释。该方法在此处得到了解释，并使用公式an+b-1。据我所知，假设n是索引，并将其值加2，选择器从2开始。子元素是基于1的索引（而不是基于0的），因此，n + 2是0 + 2，结果为第一个元素（第二个）为2。在伪类中添加last可以从末尾开始。 - Joseph Marikle

如果您在主导航中有一个表单（例如搜索框），那么您的方法在使用meterializecss时效果很好，而建议的方法则不行。 - Ruslan López

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;
}

- eliteware