2

假设我在 a 中有多个列表项<ul>，并且有比包含.aggregated该类的项组。像这样：

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li class="aggregated"></li>
    <li class="aggregated"></li>
    <li class="aggregated"></li>
    <li class="aggregated"></li>
    <li class="aggregated"></li>
    <li class="aggregated"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li class="aggregated"></li>
    <li class="aggregated"></li>
    <li class="aggregated"></li>
    <li class="aggregated"></li>
    <li class="aggregated"></li>
    <li></li>
    <li></li>
    <li></li>
    <li class="aggregated"></li>
    <li class="aggregated"></li>
</ul>

我需要能够对这些<li>元素组中的每一个进行不同的样式设置，基本上给每个组一个不同的背景颜色。所以，第一组的<li class="aggregated">背景是蓝色的，第二组的背景是黄色的，等等。我不想依赖 JS，也不想添加任意的类名或 ID。我想使用已经存在的代码。

可能的？如果是这样，怎么做？

4

4 回答 4

3

好的，这是可能的。但它非常脆弱，并且依赖于可预测的类，还需要现代浏览器：

/* presentational stuff */

li ~ li.aggregated,
li.aggregated ~ li.aggregated {
    background-color: #f90;
}

li.aggregated ~ li:not(.aggregated) ~ li.aggregated {
    background-color: #ffa;
}

li.aggregated ~ li:not(.aggregated) ~ li.aggregated ~ li:not(.aggregated) ~ li.aggregated {
    background-color: #cfc;
}​

JS 小提琴演示。

于 2012-05-30T21:39:52.790 回答
2

如果您查看任何具有其之前的元素没有的类的项目，您可以定义组编号并相应地增加它们。

var groupNum = 1;
// Get all <li>
$("ul li").each( function() {
    var element = $(this);
    if( element.hasClass("aggregated") ) {
        if( !element.prev().hasClass("aggregated") ) {
            // Prev element was not in this group. increment the group number
            groupNum++;
        }
        switch( groupNum ) {
            case 1:
                // group #1 styles
                // element.css( "background-color", "#FFF" );
                break;
            case 2:
                // group #2 styles
                // element.css( "background-color", "#00F" );
                break;
        }
    }
} );
于 2012-05-30T21:21:58.430 回答
1

您可以为不同的 bgColors 使用不同的类，或者将第二类添加到组中并将 bgColor 放入这些类中（如果您有某种目的，它们都必须具有聚合类）。

<ul>
    <li></li>
    <li class="aggregated bg1"></li>
    <li class="aggregated bg1"></li>
    <li class="aggregated bg1"></li>
    <li></li>
    <li class="aggregated bg2"></li>
    <li class="aggregated bg2"></li>
    <li class="aggregated bg2"></li>
    <li></li>
    <li class="aggregated bg3"></li>
    <li class="aggregated bg3"></li>
</ul>
于 2012-05-30T21:19:18.713 回答
0

您可以使用 div 对项目进行分组，而不是向组的每个列表项添加自定义类，例如：

<ul>
    <li></li>
    <li></li>
    <li></li>
    <div class="group">
      <li></li>
      <li></li>
      <li></li>
    </div>
</ul>

然后您可以使用选择器选择您感兴趣的组nth-of-type，例如：

ul > .group:nth-of-type(1) > li
{
    background-color:red;
}

nth-of-type选择器允许您按数字、关键字或公式选择项目。

示例jsFiddle。

于 2012-05-30T22:17:04.563 回答