Question

如何选择相邻元素序列中的最后一个元素？

考虑以下标记：

HTML

<ul>
    <li class="foo">...</li>
    <li class="foo">...</li>
    <li class="foo">...</li> <!-- bingo -->

    <li class="bar">...</li>
    <li class="bar">...</li>
    <li class="bar">...</li>
    <li class="bar">...</li> <!-- bingo -->

    <li class="foo">...</li> <!-- bingo -->

    <li class="bar">...</li>
    <li class="bar">...</li> <!-- bingo -->
</ul>

连续foo或bar元素的数量是动态的。此外，假设无法以任何方式修改标记。

选择相邻元素非常简单：

CSS

.foo + .foo, 
.bar + .bar { /* do something */ }

但是选择一系列连续元素中的最后一个元素是可能的吗？

Answer 1

你必须动态设置列表....在这种情况下给最后一个元素一个名字或一个id并添加你想要的CSS效果....

除非你有某种方法可以识别最后一个元素（可能是id或名字，如果你在控制中再设置它），你所要求的是不可能的。

Answer 2

似乎有一个nth-last-child选择器：

http://css-tricks.com/almanac/selectors/n/nth-last-child/

您应该可以使用零参数来获取最后一个

编辑：nth-last-child确实会选择最后一个与宾果游戏不匹配的孩子

希望你可以改变结构：

<ul>
   <ul>
       <li class="foo">foo 1</li>
       <li class="foo">foo 2</li>
       <li class="foo">foo 3 bingo</li>
   </ul>
   <ul>
       <li class="bar">bar 1</li>
       <li class="bar">bar 2</li>
       <li class="bar">bar 3</li>
       <li class="bar">bar 4 bingo</li>
    </ul>
    <ul>
       <li class="foo">foo 1</li>
       <li class="foo">foo 2 bingo</li>
    </ul>
</ul>

这个css会起作用：

.foo:nth-last-child(1),
.bar:nth-last-child(1)
{
    background-color: blue;
}

选择最后连续的兄弟姐妹

2 个答案: