Я пытаюсь отредактировать свою ссылку на маршрутизатор так, чтобы цвет текста, а также фон менялись, когда ссылка активна.

С помощью .router-link-exact-active класса я настроил его так, чтобы фон корректно менялся по сравнению с некоторым значением по умолчанию, но цвет текста всегда оставался неизменным?

Действительно, единственный способ вообще изменить цвет текста ссылки (включая неактивный синий цвет по умолчанию) — это изменить стиль самого тега.

Мой код для ссылки приведен ниже:

 <router-link :to="{path: '/Homer'}" exact tag="li"><a>Homer</a></router-link>
  

CSS для тега (который задает цвет до того, как ссылка станет активной — это стандартный цвет):

 a {
  color:royalblue;
  text-decoration: none;
}
  

И CSS для router-exact-link-active является:

 .router-link-exact-active {
  background: yellow;
  border-radius: 5px;
  color: red;
  font-variant: italic;
}
  

Итак, цвет фона li (поскольку для ссылки маршрутизатора, конечно, установлен тег li) изменяется корректно, но цвет текста остается синим, несмотря ни на что.

Разве цвет текста (и другие заданные стили) не должен быть каскадным переходом от активного класса родительского li к тегу (как при активной, так и при неактивной ссылке маршрутизатора) — например, в этом руководстве https://youtu.be/yn0_6T4HwHs?t=266 ?

Если нет, то как мне оформить текст, когда он активен — я предполагаю, что я бы прикрепил какой-нибудь активный класс к — тому, который не является a: active, поскольку текст не становится «активным», как только мышь закончит щелкать по нему — но, похоже, я не могу найти правильный способ сделать это?

Прошу прощения, если это очень простой вопрос, но я поискал ответ и не могу его найти.

Большое спасибо.

Поиск виновника

Когда вы видите, что применен неожиданный стиль, при отсутствии стиля пользователя / автора, вероятным виновником является таблица стилей пользовательского агента. Вы можете подтвердить это на панели DevTools «Вычисляемые стили» для проверяемого a элемента. Найдите color свойство (первый элемент), разверните элемент, чтобы отобразить применимые стили, перечисленные от наивысшего приоритета до самого низкого. Стиль с наивысшим приоритетом — это тот, который применяется в данный момент.

Для наследования цвета

Если вы хотите, чтобы a элемент унаследовал свой цвет от родительского ( .router-link-exact-active в данном случае), примените inherit .

 a {
  color: inherit;
}
  

ДЕМОНСТРАЦИЯ

Они выполняются каскадно, но у вас есть стиль по умолчанию для тегов a, который более специфичен, и поэтому ваш стиль li не применяется.

Вам нужно установить стиль, который является более конкретным, чем стиль по умолчанию.

 .router-link-exact-active a {} 
  

должно сработать