当使用＆amp;：nth-​​of-type（n）时，我可以使用n作为属性的一部分吗？

Question

例如......

&:nth-of-type(n)
  background-image: url(../images/photo**n**.jpg

...每个人自动插入号码？或者我需要手动完成，如下所示：

&:nth-of-type(1)
  background-image: url(../images/photo**1**.jpg

&:nth-of-type(2)
  background-image: url(../images/photo**2**.jpg

&:nth-of-type(3)
  background-image: url(../images/photo**3**.jpg

Answer 1

使用常规CSS无法提出要求。但是，当您在CSS示例中使用&时，我假设您正在使用像Sass / SCSS或LESS这样的预处理器。鉴于你的标记是这样的......

<div>
  <span class="for-1">111</span>
  <span class="for-2">222</span>
  <span class="for-3">333</span>
</div>

...您可以使用这些预处理器中的任何一个来实现您的要求：

<强> SCSS

span {
  @for $i from 1 through 3 {
    &:nth-of-type(#{$i}) {
      background-image: url("../images/photo#{$i}.jpg");
    }
  }
}

<强>萨斯

span
  @for $i from 1 through 3
    &:nth-of-type(#{$i})
      background-image: url("../images/photo#{$i}.jpg")

<强> LESS

.setBackgrounds(@n, @i: 1) when (@i =< @n) {
  &:nth-of-type(@{i}) {
      background-image: url("../images/photo@{i}.jpg")
  }
  .setBackgrounds(@n, (@i + 1));
}

span {
    .setBackgrounds(3);
}

Answer 2

不，这是不可能的。您可以使用SASS of LESS等预处理器为您执行此操作。但CSS无法做到这一点。