javascript - 避免包含特定类元素的最后一个元素的样式

Question

我有以下层次结构，它在几个地方使用(因此通过 jQuery 向它们添加一个类是不可行的)。

<li class="paginable">
    <span id="step-1" class="done"></span>
</li>

<li class="paginable">
    <span id="step-2" class="done"></span>
</li>

<li class="paginable">
    <span id="step-3" class="done"></span>
</li>

<li class="paginable">
    <span id="step-4" class="not-done"></span>
</li>

<li class="paginable">
    <span id="step-5" class="not-done"></span>
</li>

基于元素 span 上的 done 类，我必须为那些 span[id^="step-"] 也有 done 类。

但不包括类 done 的最后一个 span。

如何排除类为done 的最后一个span。 done 和 not-dont 类按一系列步骤的顺序更改。

我试过: span[id^="step-"].done:not(-- 父级和子级的最后一个子级有很多组合 --)

但它行不通，我从逻辑上知道这是为什么。

有什么建议吗仅限 CSS？还是我应该在使用 jQuery 切换的任何地方添加类？

Answer 1

我认为没有可用的纯 CSS 解决方案。

使用jQuery

$('span.done[id^="step-"]').not(':last').css('color', 'red')

演示:Fiddle