考虑此标记-不能更改（我意识到添加更多的类，或者ID可以使用，并且更容易，但是必须使用此标记））。
页面上最多只能有六个类别的“ test”元素，因此我可以编写代码“ long hand”，但不能确定其周围的标记/容器。
我如何使用“测试”类对这些元素中的每一个进行样式设置以显示不同的颜色？我尝试了：nth-child和：nth-of-type伪选择器，但没有成功。
<body>
<div>
<span class="test">Testing<span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum venenatis</p>
</div>
<span class="test">Testing</span>
<ul>
<li>Test</li>
<li class="test">Test</li>
<li>Test</li>
</ul>
<unknown dynamic container>
<h2 class="test">Test</h2>
</unknown dynamic container>
</body>
您可以在CSS中进行操作，下载颜色列表并生成CSS all-the-css-colors
<li class="test">item 01</li>
<li class="test">item 02</li>
<li class="test">item 03</li>
$colors: red blue green silver black yellow;
@for $colIndex from 1 through length($colors) {
.test:nth-child(#{length($colors)}n + #{$colIndex}) {
color: unquote(nth($colors, $colIndex));
}
}