Отключить изменение цвета тега привязки при посещении

Question 1

Мне нужно отключить изменение цвета тега привязки при посещении. Я сделал это:

a:visited{ color: gray }

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

Как отключить изменение цвета тега привязки при посещении без явного изменения цвета?

Question 2

Вы не можете. Вы можете стилизовать только посещенное состояние.

Для других людей, которые обнаружат это, убедитесь, что они расположены в правильном порядке:

a {color:#FF0000;}         /* Unvisited link  */
a:visited {color:#00FF00;} /* Visited link    */
a:hover {color:#FF00FF;}   /* Mouse over link */
a:active {color:#0000FF;}  /* Selected link   */

Question 3

Если вы просто хотите, чтобы цвет привязки оставался таким же, как у родительского элемента привязки, вы можете использовать наследование:

a, a:visited, a:hover, a:active {
  color: inherit;
}

Обратите внимание, что нет необходимости повторять правило для каждого селектора; просто используйте список селекторов, разделенных запятыми (порядок имеет значение для псевдоэлементов привязки). Кроме того, вы можете применить псевдоселекторы к классу, если хотите выборочно отключить специальные цвета привязки:

.special-link, .special-link:visited, .special-link:hover, .special-link:active {
  color: inherit;
}

Ваш вопрос касается только посещенного состояния, но я предположил, что вы имели в виду все состояния. Вы можете удалить другие селекторы, если хотите разрешить изменение цвета для всех, кроме посещенных.

Question 4

Чтобы :hoverпереопределить :visitedи убедиться, что :visitedон такой же, как исходный цвет, :hoverдолжен идти после :visited.

Так что, если вы хотите отключить изменение цвета, a:visitedнужно прийти раньше a:hover. Как это:

a { color: gray; }
a:visited { color: orange; }
a:hover { color: red; }

Чтобы отключить :visitedизменение, вы должны стилизовать его с помощью не псевдокласса:

a, a:visited { color: gray; }
a:hover { color: red; }

Question 5

Либо удалите селектор, либо установите тот же цвет, что и ваш текст.

Question 6

Если вы используете какой-то препроцессор, например SASS, вы можете использовать @extendфункцию:

a:visited {
  @extend a;
}

В результате вы увидите автоматически добавленный a:visitedселектор для каждого стиля с aселектором, поэтому будьте осторожны с ним, потому что ваша таблица стилей может сильно увеличиться в размере.

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

Question 7

Вы можете решить эту проблему, вызвав a:linkи a:visitedселекторы вместе. И следуйте за ним с помощью a:hoverселектора.

a:link, a:visited
{color: gray;}
a:hover
{color: skyblue;}

Question 8

Я думаю, что если я установлю для a:visitedнего цвет, это нехорошо: вы должны знать цвет тега по умолчанию aи каждый раз синхронизировать его с a:visited.

Я не хочу знать о цвете по умолчанию (он может быть установлен в common.cssвашем приложении или вы можете использовать внешние стили).

Думаю, это хорошее решение:

HTML:

<body>
    <a class="absolute">Test of URL</a>
    <a class="unvisited absolute" target="_blank" href="google.ru">Test of URL</a>
</body>

CSS:

.absolute{
    position: absolute;
}
a.unvisited, a.unvisited:visited, a.unvisited:active{
    text-decoration: none;
    color: transparent;
}

Question 9

a {
    color: orange !important;
}

!importantприводит к тому, что данное свойство не может быть переопределено, если !importantне используется другое . Обычно использование без !importantкрайней необходимости считается плохой практикой ; однако я не могу придумать другого способа «отключить» :visitedтолько с помощью CSS.

Question 10

Использование:

a:visited {
    text-decoration: none;
}

Но это повлияет только на ссылки, на которые еще не нажимали.

Answer 1

Мне нужно отключить изменение цвета тега привязки при посещении. Я сделал это:

a:visited{ color: gray }

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

Как отключить изменение цвета тега привязки при посещении без явного изменения цвета?

Answer 2

105

Вы не можете. Вы можете стилизовать только посещенное состояние.

Для других людей, которые обнаружат это, убедитесь, что они расположены в правильном порядке:

a {color:#FF0000;}         /* Unvisited link  */
a:visited {color:#00FF00;} /* Visited link    */
a:hover {color:#FF00FF;}   /* Mouse over link */
a:active {color:#0000FF;}  /* Selected link   */

Рич Брэдшоу
источник

4

Чтобы быть действительно анальным по этому поводу, не так aли a:link?

nikc.org 03

1

Думаю, да, хотя делаю это редко.

Рич Брэдшоу,

2

@ nikc.org не анальный вообще, a:linkи aэто не то же самое. Якорь не обязательно должен быть ссылкой. Обычно он меняет цвет, только когда содержит ссылку.

rustyx

Answer 3

4

Чтобы быть действительно анальным по этому поводу, не так aли a:link?

nikc.org 03

Answer 4

1

Думаю, да, хотя делаю это редко.

Рич Брэдшоу,

Answer 5

2

@ nikc.org не анальный вообще, a:linkи aэто не то же самое. Якорь не обязательно должен быть ссылкой. Обычно он меняет цвет, только когда содержит ссылку.

rustyx

Answer 6

Если вы просто хотите, чтобы цвет привязки оставался таким же, как у родительского элемента привязки, вы можете использовать наследование:

a, a:visited, a:hover, a:active {
  color: inherit;
}

Обратите внимание, что нет необходимости повторять правило для каждого селектора; просто используйте список селекторов, разделенных запятыми (порядок имеет значение для псевдоэлементов привязки). Кроме того, вы можете применить псевдоселекторы к классу, если хотите выборочно отключить специальные цвета привязки:

.special-link, .special-link:visited, .special-link:hover, .special-link:active {
  color: inherit;
}

Ваш вопрос касается только посещенного состояния, но я предположил, что вы имели в виду все состояния. Вы можете удалить другие селекторы, если хотите разрешить изменение цвета для всех, кроме посещенных.

Answer 7

Это отлично сработало, спасибо! В качестве примечания для других, вам, возможно, придется добавить! Important к тегу цвета, чтобы он правильно воспринимался в зависимости от того, что еще есть на вашем веб-сайте: color: inherit! Important;

Ммм

Answer 8

3

В Chrome это просто отображает текст ссылки черным цветом.

RajV

Answer 9

4

Есть ли способ , чтобы a:linkбыть цвет ссылки по умолчанию (обычно синий) и имеет a:visitedнаследовать от этого, без жесткого кодирования «синего» в любом месте?

rustyx

Answer 10

Чтобы :hoverпереопределить :visitedи убедиться, что :visitedон такой же, как исходный цвет, :hoverдолжен идти после :visited.

Так что, если вы хотите отключить изменение цвета, a:visitedнужно прийти раньше a:hover. Как это:

a { color: gray; }
a:visited { color: orange; }
a:hover { color: red; }

Чтобы отключить :visitedизменение, вы должны стилизовать его с помощью не псевдокласса:

a, a:visited { color: gray; }
a:hover { color: red; }

Answer 11

2

Я неправильно смотрю на это или вы делаете прямо противоположное тому, что сказано в цитате? Согласно W3Schools, это 1) a:link, a:visited2) a:hover3)a:active

Макс Трукса

Answer 12

0

Либо удалите селектор, либо установите тот же цвет, что и ваш текст.

Кайл
источник

Answer 13

Если вы используете какой-то препроцессор, например SASS, вы можете использовать @extendфункцию:

a:visited {
  @extend a;
}

В результате вы увидите автоматически добавленный a:visitedселектор для каждого стиля с aселектором, поэтому будьте осторожны с ним, потому что ваша таблица стилей может сильно увеличиться в размере.

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

Answer 14

Вы можете решить эту проблему, вызвав a:linkи a:visitedселекторы вместе. И следуйте за ним с помощью a:hoverселектора.

a:link, a:visited
{color: gray;}
a:hover
{color: skyblue;}

Answer 15

Я думаю, что если я установлю для a:visitedнего цвет, это нехорошо: вы должны знать цвет тега по умолчанию aи каждый раз синхронизировать его с a:visited.

Я не хочу знать о цвете по умолчанию (он может быть установлен в common.cssвашем приложении или вы можете использовать внешние стили).

Думаю, это хорошее решение:

HTML:

<body>
    <a class="absolute">Test of URL</a>
    <a class="unvisited absolute" target="_blank" href="google.ru">Test of URL</a>
</body>

CSS:

.absolute{
    position: absolute;
}
a.unvisited, a.unvisited:visited, a.unvisited:active{
    text-decoration: none;
    color: transparent;
}

Answer 16

Кто поставил мне минус, можете написать зачем сделали? Конечно, вы можете использовать свои цвета тега A. Но я написал, если вы используете цвета

Смагин Алексей

Answer 17

a {
    color: orange !important;
}

!importantприводит к тому, что данное свойство не может быть переопределено, если !importantне используется другое . Обычно использование без !importantкрайней необходимости считается плохой практикой ; однако я не могу придумать другого способа «отключить» :visitedтолько с помощью CSS.

Answer 18

-8

Использование:

a:visited {
    text-decoration: none;
}

Но это повлияет только на ссылки, на которые еще не нажимали.

Мольер
источник

3

Вопрос задан о цвете, а не о текстовом оформлении.

Брайан Грин

Answer 19

3

Вопрос задан о цвете, а не о текстовом оформлении.

Брайан Грин

Отключить изменение цвета тега привязки при посещении

Ответы: