元素在第n个孩子中的指数是他们应该的两倍

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

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

我意识到它正在跳过每个第一次迭代，因为.win个元素都没有带奇数的索引，它们的索引都是2的倍数。

我认为有某种.win元素的数量应该是应有的两倍，但事实并非如此。每个记录都有一个就像你期望的那样。

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

Answer 1

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