html - CSS选择接下来的两个元素

Question

我有以下 HTML:

...
<li>...</li>
<li>...</li>
<li class="last">...</li>

<li class="selected">...</li>  # <- this
<li>...</li>                   # <- this
<li class="last">...</li>      # <- this

<li>...</li>
<li>...</li>
<li class="last">...</li>
....

因此，基本上三个 li 为一组，最后一个具有特定类，其中一个组中的第一个 li 具有特殊类。

有没有办法用纯 CSS 来选择带有 selected 类的 li 和上面代码中标记的接下来的两个？

我已经设法使用 li.selected + li 选择了下一个，但这对之后的那个不起作用。

Answer 1

只需添加另一个 + li 即可到达它:

li.selected, li.selected + li, li.selected + li + li