html - 有什么方法可以设置:nth-​​child(an + b)选择器的子元素样式？

我正在尝试使用：nth-​​child（an + b）调整导航菜单的颜色以在颜色之间交替。仅我不想设置第n个子元素本身的样式，而是将子元素的锚文本放置在选定的<li>内

基本设置：

<ul class="color-text">
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
</ul>

样式：

.color-text li:nth-child(7n + 1) { // I'm alternating between seven colors
  color: --1st-color;
}

我没有使用任何实际值，因为它们并不重要。问题是我不知道如何定位选定对象的子对象。有什么建议么？谢谢！

参加了MDN，W3Schools等，似乎找不到相关的教程。

.color-text li:nth-of-type(7n + 1) a {
  color: red;
}

我想更改所选<li>的子锚文本的文本颜色

最佳答案

在class的.color-text属性上双引号肯定会有所帮助。

关于:nth-child(7a + 1)公式：在规格中var始终是n，我从不好奇地尝试更改字母。我可能是错的，但它似乎不适用于a。

这是一个工作示例：

.color-text li:nth-child(7n + 1) a {
  color: red;
}

<ul class="color-text">
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
</ul>

关于html - 有什么方法可以设置:nth-​​child(an + b)选择器的子元素样式？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54032066/