元素在 nth-child 中的索引是它们应该的两倍

Question

我正在尝试从 HAML 中的数据库中打印记录，并使用 .scss 标签相对于它们的索引设置样式，如下所示：

- i = 0
    - @records.each do |record|
        - i += 1

        :scss
            .win:nth-child(#{i}) {
                background-color: #{record.background}

                p {
                    color: #{record.font_color}
                }
            }

        .win
          %p This is styled entry

奇怪的是，只有前半部分的记录被设置了样式，而不是按时间顺序排列。

我意识到它跳过了第一次迭代，因为 none 个 .win 元素的索引为奇数，它们的索引都是二的倍数。

我认为 .win 元素的数量是应该的两倍，但实际上并没有。正如您所期望的那样，每条记录都有一个。

我不知道发生了什么，但我会在黑暗中拍摄并说当 HAML 解析文件时它识别 scss 标签中的“.win”并将其识别为 .win元素.

Answer 1

如果您只计算一个 class 的元素，请改用 nth-of-type。 nth-child 计算父元素的所有元素，然后在您选择的选择器位于第 n 个位置之一时触发。

元素在 nth-child 中的索引是它们应该的两倍

Elements have twice the index in nth-child that they should

css

haml

sass

css-selectors

selector