是否可以通过样式设置：nth-​​child（an + b）选择器的子元素？

Question

我正在尝试使用：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>

的子锚文本的文本颜色

Answer 1

尝试将:link和:visited添加到a以覆盖其他a:link和a:visited规则：

.color-text li:nth-child(7a + 1) a:link,
.color-text li:nth-child(7a + 1) a:visited { 
  ... 
}

Answer 2

在class的{​​{1}}属性上双引号肯定会有所帮助。

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

这是一个可行的示例：

a

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