html - 任何方式来设置 :nth-child(an + b) selector? 子元素的样式

Question

我正在尝试使用 :nth-child(an + b) 调整导航菜单的颜色以在颜色之间交替。只有我不想设置第 n 个子项本身的样式，但是所选 <li> 内的子 anchor 文本

基本设置:

<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;
}

我没有使用任何实际值，因为它们并不重要。问题是我不知道如何定位所选

的 child 。有什么建议么？谢谢!

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

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

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

Answer 1

关闭 .color-text 的 class 属性的双引号肯定会有帮助。

关于 :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>