Question

我已经完成了一些搜索/谷歌但它在任何地方都没有领先。这是我的问题，我有以下html结构（只是一个示例，列表的长度是动态的）：

<ul class="collection">
    <a class="collection-item head">Alvin</li>
    <a href="#" class="collection-item">Alvin</a>
    <a href="#" class="collection-item">Alvin</a>
    <a href="#" class="collection-item">Alvin</a>
    <a class="collection-item head">Alvin</li>
    <a href="#" class="collection-item">Alvin</a>
    <a href="#" class="collection-item">Alvin</a>
    <a href="#" class="collection-item">Alvin</a>
    <a class="collection-item head">Alvin</li>
    <a href="#" class="collection-item">Alvin</a>
    <a href="#" class="collection-item">Alvin</a>
    <a href="#" class="collection-item">Alvin</a>
</ul>

我希望他们像这样：http://i.imgur.com/iip6VXt.png

我为所有.head类使用css选择器来改变它们的边框颜色：

.collection .head:nth-child(1){
    border-left: 5px solid green;
}
.collection .head:nth-child(2){
    border-left: 5px solid orange;
}
.collection .head:nth-child(3){
    border-left: 5px solid blue;
}

它是.collection的第一个孩子，但第二个和第三个孩子没有改变。我发现css选择器计算所有.collection的孩子而不仅仅是.head类。

所以我被困在那里。有谁知道这种情况？

我从 Saqib Amin 得到了一个很好的答案，但我无法使其发挥作用。所以我制作了一个完整的jquery版本。希望它对uguys有用。

$('.head').each(function(index) {
    switch (index) {
        case 0:
            $(this).css({
                property1: 'value1',
                property2: 'value2'
            });
            break;
        case 1:
            $(this).css({
                property1: 'value1',
                property2: 'value2'
            });
            break;
        case 2:
            $(this).css({
                property1: 'value1',
                property2: 'value2'
            });
            break;
    }
});

Answer 1

你为第n个子选择器提供了错误的值，你的CSS应该是这样的：

.collection .head:nth-child(1){
    border-left: 5px solid green;
}
.collection .head:nth-child(5){
    border-left: 5px solid orange;
}
.collection .head:nth-child(9){
    border-left: 5px solid blue;
}

要详细了解nth-child选择器的工作原理，请访问：https://developer.mozilla.org/en/docs/Web/CSS/:nth-child

正如您所说，项目数量可能会有所不同，因此您应该使用不同的解决方案，我建议使用jQuery为每个.head元素添加索引编号，然后使用该索引设置元素的样式。

您的jQuery代码将是：

var counter = 1;
$('.head').each(function() {
    $(this).attr('data-index', counter++);
});

然后你的CSS就像：

.collection .head[data-index=1] {
    border-left: 5px solid green;
}
.collection .head[data-index=2] {
    border-left: 5px solid orange;
}
.collection .head:[data-index=3] {
    border-left: 5px solid blue;
}

Answer 2

系统将.collection作为父级，然后开始计算子级，因此css应为

.collection .head:nth-child(1){
    border-left: 5px solid green;
}
.collection .head:nth-child(5){
    border-left: 5px solid orange;
}
.collection .head:nth-child(9){
    border-left: 5px solid blue;
}

Css选择器不能像我预期的那样工作

2 个答案: