CSS:定位 sibling 但位置未知

Question

好吧，虽然我不完全确定这是否可行，但我一直试图只用 CSS 解决这个问题，所以在我求助于 JavaScript 之前，我需要在这里问一下。

我需要用类 column-title 定位 sibling 第一个 <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>

考虑 sibling 可以处于任何位置，例如:

(第五名)

<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 的任何同级李.

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

Answer 1

你可以试试半支持的"general sibling combinator" , ~。像这样的东西:

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

这是 a basic fiddle显示它正在完成。

然后您可能需要像 this 这样的垫片对于 IE7 支持，如果您愿意的话。

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

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