2

好的，尽管我不完全确定是否可行，但我一直在尝试仅使用 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>

考虑兄弟姐妹可以在任何位置，例如：

（第五名）

<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-titleli 的任何同级。

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

4

2 回答 2

5

您可以尝试半支持的“通用兄弟组合器”，~. 就像是：

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

这是一个基本的小提琴，显示它正在完成。

然后你可能需要一个像这样的垫片来支持 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;}​
于 2012-11-15T21:35:12.537 回答
2

如何使用非过滤器：

这是一个要演示的jsfiddle。

ul>li.column-title:not(:first-child) {
  color: red;
}​

由于是css3，pre IE9不支持

于 2012-11-15T21:39:29.277 回答