css - CSS:定位同级但位置未知

好的，尽管我不确定是否有可能，但我只是尝试用CSS解决这一问题，因此在使用JavaScript之前，我需要在这里询问。

我需要使用以下列表中第一个column-title的<li>类定位同级:

<ul>
    <li class="column-title">Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li class="column-title">Item 4</li>
    <li>Item 5</li>
</ul>

考虑同级可以位于位置的中，例如:

(第5名)

<ul>
    <li class="column-title">Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li class="column-title">Item 5</li>
</ul>

(第三名)

<ul>
    <li class="column-title">Item 1</li>
    <li>Item 2</li>
    <li class="column-title">Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>

我认为仅CSS不可能做到这一点，对吧？

谢谢。

编辑-

哦，男孩，我找到了解决方法:

使用同级组合器:〜

.column-title ~ .column-title { background:#ddd; }

这样，该属性将应用于第一个.column-title li的任何同级对象。

PS。我在crowjonah发布他的同时找到了答案。无论如何，我选择了他的答案作为选择的答案。

最佳答案

您可以尝试半支持的"general sibling combinator"，~。就像是:

li.column-title ~ li.column-title {color: red;}

这是a basic fiddle，显示已完成。

然后，如果需要，可能需要像this这样的填充程序来支持IE7。

看到更新后，您应该知道，为了获得最佳结果，如果要从 sibling 规则中排除li.column-title的第一个实例，则应指定:first-child:

ul li.column-title:first-child {color: blue;}
ul li.column-title:first-child ~ li.column-title {color: red;}​

关于css - CSS:定位同级但位置未知，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/13406555/