Wyłącz zmianę koloru tagu kotwicy podczas odwiedzin

Question 1

Muszę wyłączyć zmianę koloru tagu kotwicy podczas odwiedzania. Ja to zrobiłem:

a:visited{ color: gray }

(Link jest szary przed odwiedzeniem). Ale w ten sposób wyraźnie określam kolor po odwiedzeniu linku, co jest znowu zmianą koloru.

Jak mogę wyłączyć zmianę koloru tagu kotwicy podczas odwiedzin bez dokonywania żadnych wyraźnych zmian koloru?

Question 2

Nie możesz. Stylizować można tylko dla odwiedzonego stanu.

W przypadku innych osób, które to znajdą, upewnij się, że masz je we właściwej kolejności:

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

Jeśli chcesz, aby kolor kotwicy pozostał taki sam jak element nadrzędny kotwicy, możesz wykorzystać dziedziczenie:

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

Zauważ, że nie ma potrzeby powtarzania reguły dla każdego selektora; po prostu użyj listy selektorów oddzielonych przecinkami (kolejność ma znaczenie dla pseudoelementów kotwicy). Możesz także zastosować pseudoselektory do klasy, jeśli chcesz selektywnie wyłączyć specjalne kolory zakotwiczeń:

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

Twoje pytanie dotyczy tylko odwiedzonego stanu, ale założyłem, że masz na myśli wszystkie stany. Możesz usunąć inne selektory, jeśli chcesz zezwolić na zmiany kolorów na wszystkich oprócz odwiedzanych.

Question 4

Aby :hovernadpisać :visitedi upewnić się, że :visitedjest taki sam jak kolor początkowy, :hovermusi nastąpić później :visited.

Więc jeśli chcesz wyłączyć zmianę koloru, a:visitedmusisz wcześniej a:hover. Lubię to:

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

Aby wyłączyć :visitedzmianę, nadasz jej styl, używając innej niż pseudoklasy:

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

Question 5

Usuń selektor lub ustaw go na ten sam kolor, w jakim normalnie pojawia się tekst.

Question 6

Jeśli używasz preprocesora, takiego jak SASS, możesz użyć @extendfunkcji:

a:visited {
  @extend a;
}

W rezultacie zobaczysz automatycznie dodany a:visitedselektor dla każdego stylu z aselektorem, więc bądź z nim ostrożny, ponieważ twoja tabela stylów może znacznie się powiększyć.

Jako kompromis możesz dodać @extend tylko w tych blokach, których naprawdę potrzebujesz.

Question 7

Możesz rozwiązać ten problem, dzwoniąc razem a:linki a:visitedselektory. I postępuj zgodnie z nim za pomocą a:hoverselektora.

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

Question 8

Myślę, że jeśli ustawię dla a:visitedniego kolor , to nie jest dobre: musisz znać domyślny kolor tagu ai za każdym razem go synchronizować a:visited.

Nie chcę wiedzieć o domyślnym kolorze (można go ustawić w common.cssswojej aplikacji lub użyć zewnętrznych stylów).

Myślę, że to fajne rozwiązanie:

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

!importantpowoduje, że dana właściwość nie może zostać zastąpiona, chyba że !importantzostanie użyta inna . Ogólnie uważa się, !importantże używanie go, o ile nie jest to absolutnie konieczne, jest złą praktyką ; jednak nie przychodzi mi do głowy żaden inny sposób „wyłączania” :visitedtylko przy użyciu CSS.

Question 10

Posługiwać się:

a:visited {
    text-decoration: none;
}

Ale wpłynie to tylko na linki, które nie zostały jeszcze kliknięte.

Answer 1

Muszę wyłączyć zmianę koloru tagu kotwicy podczas odwiedzania. Ja to zrobiłem:

a:visited{ color: gray }

(Link jest szary przed odwiedzeniem). Ale w ten sposób wyraźnie określam kolor po odwiedzeniu linku, co jest znowu zmianą koloru.

Jak mogę wyłączyć zmianę koloru tagu kotwicy podczas odwiedzin bez dokonywania żadnych wyraźnych zmian koloru?

Answer 2

105

Nie możesz. Stylizować można tylko dla odwiedzonego stanu.

W przypadku innych osób, które to znajdą, upewnij się, że masz je we właściwej kolejności:

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

Rich Bradshaw
źródło

4

Aby być naprawdę analny o nim, nie powinien abyć a:link?

nikc.org

1

Chyba tak, chociaż rzadko to robię.

Rich Bradshaw

2

@ nikc.org nie anal w ogóle, a:linka ato nie to samo. Kotwica niekoniecznie musi być łączem. Zwykle zmienia kolor tylko wtedy, gdy zawiera link.

rustyx

Answer 3

4

Aby być naprawdę analny o nim, nie powinien abyć a:link?

nikc.org

Answer 4

1

Chyba tak, chociaż rzadko to robię.

Rich Bradshaw

Answer 5

2

@ nikc.org nie anal w ogóle, a:linka ato nie to samo. Kotwica niekoniecznie musi być łączem. Zwykle zmienia kolor tylko wtedy, gdy zawiera link.

rustyx

Answer 6

204

Jeśli chcesz, aby kolor kotwicy pozostał taki sam jak element nadrzędny kotwicy, możesz wykorzystać dziedziczenie:

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

Zauważ, że nie ma potrzeby powtarzania reguły dla każdego selektora; po prostu użyj listy selektorów oddzielonych przecinkami (kolejność ma znaczenie dla pseudoelementów kotwicy). Możesz także zastosować pseudoselektory do klasy, jeśli chcesz selektywnie wyłączyć specjalne kolory zakotwiczeń:

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

Twoje pytanie dotyczy tylko odwiedzonego stanu, ale założyłem, że masz na myśli wszystkie stany. Możesz usunąć inne selektory, jeśli chcesz zezwolić na zmiany kolorów na wszystkich oprócz odwiedzanych.

Ryan
źródło

To działało świetnie, dzięki! Jako uwaga dla innych, być może będziesz musiał dodać! Ważne do znacznika koloru, aby był on prawidłowo przyjmowany w zależności od tego, co jeszcze jest w Twojej witrynie: kolor: dziedzicz! Ważne;

Mmm

3

W Chrome po prostu renderuje tekst linku na czarno.

RajV

4

Czy jest jakiś sposób, aby a:linkbyć domyślny kolor linku (zazwyczaj niebieski) i mają a:visitedDziedzicz że bez sztywnego kodowania „niebieski” w dowolnym miejscu?

rustyx

Answer 7

To działało świetnie, dzięki! Jako uwaga dla innych, być może będziesz musiał dodać! Ważne do znacznika koloru, aby był on prawidłowo przyjmowany w zależności od tego, co jeszcze jest w Twojej witrynie: kolor: dziedzicz! Ważne;

Mmm

Answer 8

3

W Chrome po prostu renderuje tekst linku na czarno.

RajV

Answer 9

4

Czy jest jakiś sposób, aby a:linkbyć domyślny kolor linku (zazwyczaj niebieski) i mają a:visitedDziedzicz że bez sztywnego kodowania „niebieski” w dowolnym miejscu?

rustyx

Answer 10

Aby :hovernadpisać :visitedi upewnić się, że :visitedjest taki sam jak kolor początkowy, :hovermusi nastąpić później :visited.

Więc jeśli chcesz wyłączyć zmianę koloru, a:visitedmusisz wcześniej a:hover. Lubię to:

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

Aby wyłączyć :visitedzmianę, nadasz jej styl, używając innej niż pseudoklasy:

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

Answer 11

2

Czy patrzę na to źle, czy robisz dokładnie odwrotność tego, co zostało powiedziane w cytacie? Według W3Schools jest to 1) a:link, a:visited2) a:hover3)a:active

Max Truxa

Answer 12

0

Usuń selektor lub ustaw go na ten sam kolor, w jakim normalnie pojawia się tekst.

Kyle
źródło

Answer 13

Jeśli używasz preprocesora, takiego jak SASS, możesz użyć @extendfunkcji:

a:visited {
  @extend a;
}

W rezultacie zobaczysz automatycznie dodany a:visitedselektor dla każdego stylu z aselektorem, więc bądź z nim ostrożny, ponieważ twoja tabela stylów może znacznie się powiększyć.

Jako kompromis możesz dodać @extend tylko w tych blokach, których naprawdę potrzebujesz.

Answer 14

Możesz rozwiązać ten problem, dzwoniąc razem a:linki a:visitedselektory. I postępuj zgodnie z nim za pomocą a:hoverselektora.

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

Answer 15

Myślę, że jeśli ustawię dla a:visitedniego kolor , to nie jest dobre: musisz znać domyślny kolor tagu ai za każdym razem go synchronizować a:visited.

Nie chcę wiedzieć o domyślnym kolorze (można go ustawić w common.cssswojej aplikacji lub użyć zewnętrznych stylów).

Myślę, że to fajne rozwiązanie:

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

Kto ustawił mi minus, czy możesz napisać, dlaczego to zrobiłeś? Oczywiście możesz użyć swoich kolorów tagu A. Ale napisałem, jeśli używasz domyślnych kolorów przeglądarki

Smagin Alexey

Answer 17

a {
    color: orange !important;
}

!importantpowoduje, że dana właściwość nie może zostać zastąpiona, chyba że !importantzostanie użyta inna . Ogólnie uważa się, !importantże używanie go, o ile nie jest to absolutnie konieczne, jest złą praktyką ; jednak nie przychodzi mi do głowy żaden inny sposób „wyłączania” :visitedtylko przy użyciu CSS.

Answer 18

-8

Posługiwać się:

a:visited {
    text-decoration: none;
}

Ale wpłynie to tylko na linki, które nie zostały jeszcze kliknięte.

Moliere
źródło

3

Pytanie dotyczyło koloru, a nie dekoracji tekstu.

Bryan Green,

Answer 19

3

Pytanie dotyczyło koloru, a nie dekoracji tekstu.

Bryan Green,

Wyłącz zmianę koloru tagu kotwicy podczas odwiedzin

Odpowiedzi: