Supprimer TOUT le style / formatage des hyperliens


157

Je crée un menu de navigation avec des mots de différentes couleurs ( hrefliens). Je voudrais que la couleur ne change dans aucun état (survol, visité, etc.).

Je sais comment définir les couleurs pour les différents états, mais j'aimerais connaître le code pour laisser simplement la couleur du texte (et tout autre style / formatage) tel quel.

Aucune suggestion?

Réponses:


249

Vous pouvez simplement définir un style pour les liens, qui remplacerait a:hover, a:visitedetc.:

a {
  color: blue;
  text-decoration: none; /* no underline */
}

Vous pouvez également utiliser la inheritvaleur si vous souhaitez utiliser les attributs des styles parents à la place:

body {
  color: blue;
}
a {
  color: inherit; /* blue colors for links too */
  text-decoration: inherit; /* no underline */
}

4
La partie importante est le inheritmot - clé. Il n'a malheureusement pas 100% de support.
david

2
initialest également utile lorsque vous souhaitez réinitialiser css au style par défaut. Ceci est bien expliqué ici lien
SiteHopper

Merci beaucoup pour inherit!
parsecer

@david, ça tient toujours? Ne inheritfonctionne pas uniquement dans les navigateurs anciens et Internet Explorer ou il existe également des difficultés dans les navigateurs courants (Chrome, Firefox)?
parsecer

1
Découvrez également unset . >> Le mot-clé CSS non défini réinitialise une propriété à sa valeur héritée si elle hérite de son parent, et à sa valeur initiale sinon. En d'autres termes, il se comporte comme le mot-clé inherit dans le premier cas, et comme le mot-clé initial dans le second cas.
JackMorrissey

4

Comme Chris l'a dit avant moi, juste un adevrait être remplacé. Par exemple:

a { color:red; }
a:hover { color:blue; }
.nav a { color:green; }

Dans ce cas, le .nav aserait TOUJOURS vert, le: hover ne s'y appliquerait pas.

S'il y a une autre règle qui l'affecte, vous POUVEZ utiliser !important, mais vous ne devriez pas. C'est une mauvaise habitude de tomber.

.nav a { color:green !important; } /*I'm a bad person and shouldn't use !important */

Ensuite, ce sera toujours vert, sans rapport avec aucune autre règle.


Ce n'est pas ce qu'il a demandé. Relisez la question. Il le sait déjà.
david

@david J'ai relu, je suis sûr que c'est ce qu'il a demandé. Ce code lui permettra de définir un style pour alequel évitera toute modification sur :hover(ou :visitedetc). Que diriez-vous au lieu d'être une bite et de frotter les trois réponses, vous suggérez une solution réelle?
SpoonNZ

Merci pour l'aide. Mais que faire si le lien est comme ça. 2 mots en 2 couleurs, mais ce n'est qu'un lien: ventes uniques (en rose) (en noir) Et elles devraient rester de cette couleur dans n'importe quel état. Je l'ai codé en ligne de cette façon ... <a href="#" style="text-decoration: none" target="_blank"> <span style = "font-family: Arial; font-size: 13px; color: # e91974; font-weight: plus léger; "> unique </span> <span style =" font-family: Arial; font-size: 13px; color: # 020202; font-weight: plus léger; "> ventes </ span > </a> Mais il doit y avoir un nettoyeur. (il y a de nombreux liens comme celui-ci dans le code) Des suggestions?
SiteHopper

1

Vous pouvez simplement utiliser un asélecteur dans votre feuille de style pour définir tous les états d'une ancre / lien hypertexte. Par exemple:

a {
    color: blue;
}

Remplacerait tous les styles de lien et rendrait tous les états de couleur bleue.


Ce n'est pas ce qu'il a demandé. Relisez la question. Il le sait déjà.
david

-1

si vous indiquez a.redLink{color:red;}alors de garder cela en survol et d'ajouter a.redLink:hover{color:red;} cela, cela garantira qu'aucun autre état de survol ne changera la couleur de vos liens

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.