web-dev-qa-db-fra.com

remplacer le style de lien dans une div html

J'ai une div dans laquelle j'aimerais remplacer mon style de lien global. J'ai deux styles de lien, un global, un spécifique. Voici le code:

A:link {text-decoration: none; color: #FF0000;}
A:visited {text-decoration: none; color: #FF0000;}
A:hover {text-decoration: none; color: #FF0000;}
A:active {text-decoration: none; color: #FF0000;}

#macrosectiontext
{
    position:relative;
    font:Arial, sans-serif;
    text-align:center;
    font-size:50px;
    font-style: bold;
    margin-top:245px;
    opacity: 0.6;
    background-color:transparent;
}

#macrosectiontext A:link {text-decoration: none; color: #000000;}
#macrosectiontext A:visited {text-decoration: none; color: #FFFFFF;}
#macrosectiontext A:hover {text-decoration: none; color: #FFFFFF;}
#macrosectiontext A:active {text-decoration: none; color: #FFFFFF;}

et j'utilise le div comme ceci:

<div id="macrosectiontext"><a href="www.google.it">bla bla bla</a></div>

mais il semble que cela ne fonctionne pas. Le div hérite toujours du style de lien global.

csshtmlhyperlinkstylesheet
14
Gianluca Ghettini

  1. Dans le CSS, je n'utiliserais pas l'ID "#macrosectiontext a: link ..." pour le code de lien j'utiliserais une classe ".macrosectiontext"

  2. utiliser un minuscule "a" au lieu d'un capuchon "A" dans le style de lien

  3. Si vous n'utilisez le style que quelques fois, vous pouvez utiliser une balise span autour du lien, puis appeler votre style à partir de la balise span à la place de la div.

7
JFelton

CSS fonctionne sur l'héritage, vous ne devez donc remplacer que les propriétés que vous souhaitez modifier.

Essayez toujours d'écrire HTML et CSS en minuscules, toujours votre HTML et CSS sont corrects

a:link, a:visited, a:hover, a:active {
  text-decoration: none; color: #f00;
}

#macrosectiontext {
  position:relative;
  font:Arial, sans-serif;
  text-align:center;
  font-size:50px;
  font-style: bold;
  margin-top:245px;
  opacity: 0.6;
  background-color:transparent;
}

#macrosectiontext a:link {color: #000;}
#macrosectiontext a:visited, #macrosectiontext a:hover,
#macrosectiontext a:active {
  color: #fff;
}

I fait un violon pour vous pour montrer que votre code fonctionne ( a changé la couleur du survol, juste pour la démo )

10
Mark