Html 在Sass中使用@for将颜色列表应用于相同类型的元素

我在这个项目中使用波旁威士忌、利特威士忌和苦味威士忌，我从重新填充中得到了一堆代码

我有一个颜色列表，我需要分别应用于6个不同的h2元素

在项目的其他地方，我也以类似的方式成功地做到了这一点，但我在这里很难翻译它

我尝试过的每一种方法都只会将第一种颜色应用于所有h2元素。如果我在第n个$I后面添加一个数字，比如

nth（$colors，$I+1）

，它会将列表中的第二种颜色应用于所有颜色

奇怪的是，CSS输出是正确的，但问题似乎与类型的第n个<代码>有关，因为只有类型（1）的第n个<代码>出现

以下是我到目前为止所拥有的重要部分：

.bullets {
  $icon-bullet-size: 3.5em;
  $colors:
      desaturate($logo-blue, 30),
      desaturate($logo-green, 10),
      desaturate($logo-yellow, 30),
      desaturate($badred, 30),
      desaturate($goldenrod, 30);

  padding: 2em;
  overflow: auto;
  margin-bottom: $base-line-height;
  text-align: center;


  h2 {
    @for $i from 1 to length($colors) {
      &:nth-of-type(#{$i}) {
        $color-from-list: nth($colors, $i);
        color: $color-from-list;
      }
    }
  }
}

h2元素嵌套在两层深处，如下所示：

<ul class="bullets">
<li class="bullet three-col-bullet">
  <div class="bullet-content">
    <h2>This needs to be one color</h2>
    <p>some content</p>
    </div>
</li>  
<li class="bullet three-col-bullet">
  <div class="bullet-content">
    <h2>This is a second color</h2>
    <p>content</p>
  </div>
</li>
<li class="bullet three-col-bullet">
  <div class="bullet-content">
    <h2>Radisson Hotel Salt Lake City</h2>
    <p>215 West South Temple<br>
      $129 USD—standard room<br>
      $139/$149 USD—triple/quad
    </p>
  </div>
</li>    
</ul>

这必须是一种颜色
一些内容



这是第二种颜色
内容



盐湖城雷迪森酒店
215西南寺

129美元标准房

139美元/149美元三倍/四倍

这是我努力实现的一个很好的例子

我也参考了，并尝试了建议的解决方案

---

我哪里做错了？谢谢你的帮助

您的逻辑不正确。类型（n）选择器的

：n用于同级元素。没有一个h2元素是彼此的兄弟元素。li元素是兄弟元素，h2元素是以下元素的后代：

@for $i from 1 to length($colors) {
  li:nth-of-type(#{$i}) h2 {
    $color-from-list: nth($colors, $i);
    color: $color-from-list;
  }
}

无法复制：正如@cimmanon所说，您的代码似乎按预期工作。请向我们展示CSS输出的摘录。谢谢@cimmanon和Alex Guerrero。你说得对。我进一步缩小了范围，并编辑了原始问题。