选择最后一个连续的兄弟

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

:has 的 CSS 支持仍然很差，但可以解决问题：

/* selects any .foo that has no .foo immediately after it  */
.foo:has(+ :not(.foo)) {}

Answer 2

您必须动态设置列表....在这种情况下，为最后一个元素指定名称或 id 并添加您想要的 css 效果....

除非您有某种方式可以识别最后一个元素（可能是 id 或名称，如果您可以控制，请再次设置），否则您的要求是不可能的。

Answer 3

我不相信有办法在不改变 HTML 或生成它的方式的情况下做到这一点。但是，如果您通过.append() 方法生成它，那么使用它（理论上）只需将其更改为.prepend()。如果你这样做，你可以改变 ul 的 css 让它向后选择，然后你可以像这样使用 + 选择器：

（编辑：我不知道如何重新排序 sn-p，但 JS 是最不重要的，只有当你想看到 .prepend() 的实际作用时才在那里）

//some generation examples just for fun

foo.addEventListener('click',addKnown);
bar.addEventListener('click',addKnown);
r.addEventListener('click',addRandom);

function addKnown(e) {
  let li = document.createElement('li');
  li.className = e.target.id;
  li.textContent = e.target.id;
  document.querySelector('ul').prepend(li);
}
function addRandom(e) {
  let li = document.createElement('li');
  let type = ['foo','bar'][Math.round(Math.random())];
  li.className = type;
  li.textContent = type;
  document.querySelector('ul').prepend(li);
 }

ul {
  display: flex;
  flex-direction: column-reverse;
}

li:first-of-type,
.foo+.bar,
.bar+.foo {
  color: red
}

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

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

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

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

<!-- some generation examples just for fun-->
<button id="foo">Add foo</button>
<button id="bar">Add bar</button>
<button id="r">Add random</button>

我还建议为 ul 提供某种类或 id，除非您只有一个或希望页面上的所有 ul 都是这种情况。

很抱歉，我知道这不是您想要的（因为它在技术上确实会通过将标记倒退来更改标记），但我希望它至少是可能的或有助于找到合适的东西。

Answer 4

似乎有一个 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;
}