Есть ли способ стилизовать дочерний элемент селектора nth-child (an + b)?

Question

Я пытаюсь настроить цвета меню навигации для чередования цветов, используя: nth-child (an + b).Только я не хочу стилизовать сам nth-child, но текст привязки дочернего элемента внутри выбранного <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

Закрытие двойных кавычек для атрибута class .color-text, безусловно, поможет.

Относительно формулы :nth-child(7a + 1): в спецификациях переменная всегда равна 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>

Answer 2

Попробуйте добавить :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 { 
  ... 
}