Désactiver le changement de couleur de la balise d'ancrage lors de la visite

Question 1

Je dois désactiver le changement de couleur d'une balise d'ancrage lors de la visite. J'ai fait ça:

a:visited{ color: gray }

(Le lien est de couleur grise avant d'être visité.) Mais c'est une façon où j'indique explicitement la couleur après la visite du lien, ce qui est encore un changement de couleur.

Comment puis-je désactiver le changement de couleur d'une balise d'ancrage lors de la visite sans faire de changement de couleur explicite?

Question 2

Vous ne pouvez pas. Vous ne pouvez styliser que l'état visité.

Pour les autres personnes qui trouvent cela, assurez-vous de les avoir dans le bon ordre:

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

Si vous voulez simplement que la couleur d'ancrage reste la même que l'élément parent de l'ancre, vous pouvez tirer parti de l'héritage:

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

Notez qu'il n'est pas nécessaire de répéter la règle pour chaque sélecteur; utilisez simplement une liste de sélecteurs séparés par des virgules (l'ordre est important pour les pseudo éléments d'ancrage). En outre, vous pouvez appliquer les pseudo sélecteurs à une classe si vous souhaitez désactiver sélectivement les couleurs d'ancrage spéciales:

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

Votre question ne porte que sur l'état visité, mais j'ai supposé que vous parliez de tous les États. Vous pouvez supprimer les autres sélecteurs si vous souhaitez autoriser les changements de couleur sur tous sauf ceux visités.

Question 4

Car :hoverpour remplacer :visited, et pour s'assurer :visitedque la couleur initiale est la même, :hoverdoit venir après :visited.

Donc, si vous souhaitez désactiver le changement de couleur, vous a:visiteddevez venir avant a:hover. Comme ça:

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

Pour désactiver le :visitedchangement, vous le stylisez avec une classe non pseudo:

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

Question 5

Supprimez le sélecteur ou définissez-le sur la même couleur que votre texte apparaît normalement.

Question 6

Si vous utilisez un pré-processeur comme SASS, vous pouvez utiliser la @extendfonctionnalité:

a:visited {
  @extend a;
}

En conséquence, vous verrez un a:visitedsélecteur ajouté automatiquement pour chaque style avec asélecteur, alors soyez prudent avec lui, car votre table de style peut être beaucoup plus grande.

En guise de compromis, vous ne pouvez ajouter @extend que dans les blocs dont vous avez vraiment besoin.

Question 7

Vous pouvez résoudre ce problème en appelant a:linket a:visitedsélecteurs ensemble. Et suivez-le avec le a:hoversélecteur.

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

Question 8

Je pense que si je mets une couleur pour a:visitedce n'est pas bon: il faut connaître la couleur par défaut du tag aet à chaque fois le synchroniser avec a:visited.

Je ne veux pas connaître la couleur par défaut (elle peut être définie dans common.cssvotre application, ou vous pouvez utiliser des styles extérieurs).

Je pense que c'est une bonne solution:

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

!importanta pour effet que la propriété en question ne peut être remplacée que si une autre !importantest utilisée. Il est généralement considéré comme une mauvaise pratique à utiliser à !importantmoins que cela ne soit absolument nécessaire; cependant, je ne peux penser à aucun autre moyen de «désactiver» en :visitedutilisant uniquement CSS.

Question 10

Utilisation:

a:visited {
    text-decoration: none;
}

Mais cela n'affectera que les liens sur lesquels vous n'avez pas encore cliqué.

Answer 1

Je dois désactiver le changement de couleur d'une balise d'ancrage lors de la visite. J'ai fait ça:

a:visited{ color: gray }

(Le lien est de couleur grise avant d'être visité.) Mais c'est une façon où j'indique explicitement la couleur après la visite du lien, ce qui est encore un changement de couleur.

Comment puis-je désactiver le changement de couleur d'une balise d'ancrage lors de la visite sans faire de changement de couleur explicite?

Answer 2

105

Vous ne pouvez pas. Vous ne pouvez styliser que l'état visité.

Pour les autres personnes qui trouvent cela, assurez-vous de les avoir dans le bon ordre:

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
la source

4

Pour être vraiment anal à ce sujet, n'est-ce apas a:link?

nikc.org

1

Je suppose que oui, même si je fais rarement cela.

Rich Bradshaw

2

@ nikc.org pas du tout anal, a:linket nea sont pas les mêmes. Une ancre ne doit pas nécessairement être un lien. Il ne change normalement de couleur que lorsqu'il contient un lien.

rustyx

Answer 3

4

Pour être vraiment anal à ce sujet, n'est-ce apas a:link?

nikc.org

Answer 4

1

Je suppose que oui, même si je fais rarement cela.

Rich Bradshaw

Answer 5

2

@ nikc.org pas du tout anal, a:linket nea sont pas les mêmes. Une ancre ne doit pas nécessairement être un lien. Il ne change normalement de couleur que lorsqu'il contient un lien.

rustyx

Answer 6

203

Si vous voulez simplement que la couleur d'ancrage reste la même que l'élément parent de l'ancre, vous pouvez tirer parti de l'héritage:

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

Notez qu'il n'est pas nécessaire de répéter la règle pour chaque sélecteur; utilisez simplement une liste de sélecteurs séparés par des virgules (l'ordre est important pour les pseudo éléments d'ancrage). En outre, vous pouvez appliquer les pseudo sélecteurs à une classe si vous souhaitez désactiver sélectivement les couleurs d'ancrage spéciales:

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

Votre question ne porte que sur l'état visité, mais j'ai supposé que vous parliez de tous les États. Vous pouvez supprimer les autres sélecteurs si vous souhaitez autoriser les changements de couleur sur tous sauf ceux visités.

Ryan
la source

Cela a très bien fonctionné, merci! En guise de note aux autres, vous devrez peut-être ajouter! Important à la balise de couleur pour qu'elle prenne correctement en fonction du contenu de votre site Web: couleur: hérite! Important;

Mmm

3

Dans Chrome, cela rend simplement le texte du lien en noir.

RajV

4

Existe-t-il un moyen d'avoir a:linkla couleur du lien par défaut (généralement bleu) et d'en a:visitedhériter, sans codage en dur "bleu" nulle part?

rustyx

Answer 7

Cela a très bien fonctionné, merci! En guise de note aux autres, vous devrez peut-être ajouter! Important à la balise de couleur pour qu'elle prenne correctement en fonction du contenu de votre site Web: couleur: hérite! Important;

Mmm

Answer 8

3

Dans Chrome, cela rend simplement le texte du lien en noir.

RajV

Answer 9

4

Existe-t-il un moyen d'avoir a:linkla couleur du lien par défaut (généralement bleu) et d'en a:visitedhériter, sans codage en dur "bleu" nulle part?

rustyx

Answer 10

Car :hoverpour remplacer :visited, et pour s'assurer :visitedque la couleur initiale est la même, :hoverdoit venir après :visited.

Donc, si vous souhaitez désactiver le changement de couleur, vous a:visiteddevez venir avant a:hover. Comme ça:

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

Pour désactiver le :visitedchangement, vous le stylisez avec une classe non pseudo:

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

Answer 11

2

Est-ce que je regarde cela mal ou fais-tu exactement le contraire de ce qui est dit dans la citation? Selon W3Schools, c'est 1) a:link, a:visited2) a:hover3)a:active

Max Truxa

Answer 12

0

Supprimez le sélecteur ou définissez-le sur la même couleur que votre texte apparaît normalement.

Kyle
la source

Answer 13

Si vous utilisez un pré-processeur comme SASS, vous pouvez utiliser la @extendfonctionnalité:

a:visited {
  @extend a;
}

En conséquence, vous verrez un a:visitedsélecteur ajouté automatiquement pour chaque style avec asélecteur, alors soyez prudent avec lui, car votre table de style peut être beaucoup plus grande.

En guise de compromis, vous ne pouvez ajouter @extend que dans les blocs dont vous avez vraiment besoin.

Answer 14

Vous pouvez résoudre ce problème en appelant a:linket a:visitedsélecteurs ensemble. Et suivez-le avec le a:hoversélecteur.

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

Answer 15

Je pense que si je mets une couleur pour a:visitedce n'est pas bon: il faut connaître la couleur par défaut du tag aet à chaque fois le synchroniser avec a:visited.

Je ne veux pas connaître la couleur par défaut (elle peut être définie dans common.cssvotre application, ou vous pouvez utiliser des styles extérieurs).

Je pense que c'est une bonne solution:

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

Qui m'a mis moins, pouvez-vous écrire pourquoi vous l'avez fait? Bien sûr, vous pouvez utiliser vos couleurs de balise A. Mais j'ai écrit si vous utilisez les couleurs du navigateur par défaut

Smagin Alexey

Answer 17

a {
    color: orange !important;
}

!importanta pour effet que la propriété en question ne peut être remplacée que si une autre !importantest utilisée. Il est généralement considéré comme une mauvaise pratique à utiliser à !importantmoins que cela ne soit absolument nécessaire; cependant, je ne peux penser à aucun autre moyen de «désactiver» en :visitedutilisant uniquement CSS.

Answer 18

-8

Utilisation:

a:visited {
    text-decoration: none;
}

Mais cela n'affectera que les liens sur lesquels vous n'avez pas encore cliqué.

Molière
la source

3

La question posée sur la couleur, pas sur la décoration du texte.

Bryan Green le

Answer 19

3

La question posée sur la couleur, pas sur la décoration du texte.

Bryan Green le

Désactiver le changement de couleur de la balise d'ancrage lors de la visite

Réponses: