Question

我有这个例子：

<div class="container">
    <div class="item-1"></div>
    <div class="item-2"></div>
    <div class="item-2"></div>
    <div class="item-2"></div>
    <div class="item-3"></div>
    <div class="item-3"></div>
</div>

...而且项目＃可能高达48个。我想做的是针对每个独特的.item-＃并给它一个不同的颜色。

我尝试在SCSS中玩这个：

@for $i from 1 through 48 {
    .item-#{$i} { 
       &:nth-child(1):nth-last-child(2),
       &:nth-child(2):nth-last-child(1) { 
            color: red; } 
       }
}

......但它不起作用。我在这里找到了一个类似的解决方案：Can CSS detect the number of children an element has?，但区别在于我需要将所有.item-＃包装在一个容器中。

我想避免使用JavaScript。

Answer 1

CSS不提供基于匹配相同选择器的兄弟节点数匹配元素的功能。见Can I combine :nth-child() or :nth-of-type() with an arbitrary selector?

在此期间没有纯CSS的解决方法。

选择器4的:nth-child(An+B of S)符号将提供此功能（令人讨厌的是，:only-child()还没有等效的功能表示法），但您仍需要提前知道选择器S。这就是你的SCSS会派上用场的地方：

@for $i from 1 through 48 {
    :nth-child(1 of .item-#{$i}):nth-last-child(1 of .item-#{$i}) {
        // Styles
    }
}

令人惊讶的是，尽管Selectors 4仍然是一个不稳定的草案，除了Safari之外没有人将此扩展实现到:nth-child()，这将使用当前版本的Sass正确编译。当然，由于它没有实现，它实际上并没有起作用。不过，很高兴知道我们将来能够做到这一点（假设Safari的实施仍然存在并且每个人都效仿）。

根据单个容器SCSS中的兄弟节点数量调整元素大小

1 个答案: