Vue JS: Как стилизовать активный тег <a>в ссылке на маршрутизатор? - PullRequest
Новая
       2

Vue JS: Как стилизовать активный тег <a>в ссылке на маршрутизатор?

0 голосов
/ 12 марта 2019

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

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

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

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

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

CSS для тега (который устанавливает цвет перед активацией ссылки - это стандартный цвет): 

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

И CSS для роутера-точной-активной-ссылки: 

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

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

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

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

Извиняюсь, если это очень простой вопрос, но я искал ответ и не могу его найти.

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

Ответы [ 2 ]

2 голосов
/ 13 марта 2019

В поисках виновника

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

image

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

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

a {
  color: inherit;
}

демо

2 голосов
/ 12 марта 2019

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

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

.router-link-exact-active a {}

должен добиться цели

...