web-dev-qa-db-fra.com

Ancre HTML, style désactivé

J'ai du code de lien d'ancrage html, et contrairement au reste du document, je veux qu'il ressemble à un lien.

Existe-t-il un moyen simple de désactiver le changement de style provoqué par l'habillage du texte dans une balise d'ancrage sans avoir à le forcer brutalement à être le même (c'est-à-dire que si je change le style de police du corps, je n'ai pas besoin de changer également un autre: lien des trucs).

htmlcssanchor
32
Jonathon

Définir la couleur sur noir et la décoration de texte sur explicitement aucun n'est un peu plus agressif que cela n'a fonctionné pour moi.

Je cherchais le CSS des ancres pour être "bénin" et juste se fondre dans le CSS existant. Voici ce que je suis allé avec:

a.nostyle:link {
    text-decoration: inherit;
    color: inherit;
    cursor: auto;
}

a.nostyle:visited {
    text-decoration: inherit;
    color: inherit;
    cursor: auto;
}

Ensuite, je viens d'ajouter la classe CSS nostyle aux ancres que je voulais ne pas mettre en forme.

58
Jeff Fischer

Si vous ne vous souciez pas d'IE, vous pouvez attacher :not(#exclude) (où exclude est l'ID du lien en question) à vos styles de lien:

a:link:not(#exclude), a:visited:not(#exclude) {
    text-decoration: none;
    color: blue;
    cursor: pointer;
}

Sinon, je ne pense pas que vous puissiez le forcer brutalement comme vous le décrivez. Vous pouvez soit utiliser un style en ligne à la place (non recommandé), soit utiliser une classe/ID spéciale affectée à ce lien, dont vous grouperiez le sélecteur avec body. Par exemple, si vous aviez ces styles:

body {
    text-decoration: none;
    color: black;
    cursor: auto;
}

a:link, a:visited {
    text-decoration: none;
    color: blue;
    cursor: pointer;
}

Vous pouvez simplement lancer un sélecteur plus spécifique, qui correspondrait à ce lien, sur la règle body:

body, #exclude {
    text-decoration: none;
    color: black;
    cursor: auto;
}

a:link, a:visited {
    text-decoration: none;
    color: blue;
    cursor: pointer;
}
5
BoltClock

J'ai atteint cet objectif en créant une classe .reset-a Et en ciblant toutes ses 'pseudo classes.

Le ciblage de toutes les pseudo-classes est important pour le rendre impeccable.

La propriété outline: 0 Supprime la bordure en pointillés qui entoure un lien lorsqu'il est focalisé ou actif.

.reset-a, .reset-a:hover, .reset-a:visited, .reset-a:focus, .reset-a:active  {
  text-decoration: none;
  color: inherit;
  outline: 0;
  cursor: auto;
}
3
Markandeya