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

Question

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

我正在尝试在 ul 中使用 nth-child 或 nth-last-child select 或 select 每个 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;
}

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

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

Here is a fiddle.

Answer 1

使用 :not(:last-child) 定位除最后一个以外的所有对象。

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

Answer 2

使用:nth-last-of-type or :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 select 长度未知时除最后一个元素外的所有元素

CSS nth-child select all but last element when length is unknown

css

css-selectors