CSS选择接下来的两个元素答案

【问题标题】：CSS select next two elementsCSS选择接下来的两个元素
【发布时间】：2012-02-20 22:25:28
【问题描述】：

我有以下 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>
....

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

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

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

【问题讨论】：

标签： html css css-selectors

【解决方案1】：

只需添加另一个 + li 即可访问它：

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

【讨论】：

这属于什么 CSS 规范？它在浏览器中得到广泛支持吗？我需要把它归档到某个地方。
你确定吗？在当前的 Chrome 中不适合我。
@Surreal Dreams：是CSS2，IE7+支持多年，就像子选择器>一样。
@lucas clemente：你能在 jsFiddle 中重现这个问题吗？
我实际上在 jsFiddle 中尝试过，因为它不是一个熟悉的选择器，而且在 Chrome 中对我来说效果很好。感谢您的回答。