Question

我想使用一个类来根据循环对元素进行着色，如下所示（SCSS）

    @for $i from 1 through $logo_clr_cnt {
        .header:nth-of-type(#{$logo_clr_cnt}n+#{$i}){
            background-color: nth($logo_clrs, $i)
        }
    }

当.header元素都是同一元素的子元素时，这是有效的，但有没有办法让它工作呢？即本页的第n个元素。或者以任何方式获得类似的行为？

例如下面（简称为HAML）

.row
  .header
.row
  .header

Answer 1

不，这是不可能的。 nth-of-type的规范用DOM中的“兄弟元素”来表示。

如果您希望定位与选择器匹配的元素，无论它们在DOM中的哪个位置，您都必须在JavaScript中执行此操作，例如

var all = document.querySelectorAll(".header");
var filtered = Array.prototype.slice.call(all, 1, 3); // 2nd and 3rd .header
for (var i = 0; i < filtered.length; ++i) {
    // do something with filtered[i]
}

Answer 2

我通过添加一个抽象层来解决这个问题。我使用2个类，一个用于选择，一个用于样式。

.row.header-container
  .header
.row.header-container
  .header

@for $i from 1 through $logo_clr_cnt {
    .header-container:nth-of-type(#{$logo_clr_cnt}n+#{$i}){
        .header{
            background-color: nth($logo_clrs, $i)
        }
    }
}

这不是一个确切的答案，但如果其他人试图做同样的事情，这可能会有所帮助。正如古老的谚语所说，所有问题都可以通过额外的抽象层来解决......

如果元素不共享直接父级，是否可以使nth-of-type工作？

2 个答案: