plusieurs fois un href avec des couleurs différentes

Question

Comment puis-je utiliser deux ou plusieurs couleurs pour plusieurs a href? Par exemple:

a {color: white;} 
 
    #colorGreen {color: green;}

<div id="navBar"> 
 
    <p><a id="colorGreen" href="home.html">home</a><a id="colorGreen" href="page1.html"> page1</a> page2</p> 
 
    </div> 
 

 
<div id="textDiv"> 
 
    <p><a href="link1.html">link1</a></p> 
 
    <p><a href="link2.html">link2</a></p> 
 
    <p><a href="link3.html">link3</a></p> 
 
</div> 
 

Il ne fonctionne que si l'id="colorGreen" est donnée à la a href et il ne fonctionne pas si elle est donnée à la p qui contient tout le lien et ni à la div .

Y a-t-il un meilleur moyen d'écrire ceci?

Thx.

Answer 1

Votre CSS définit déjà que <a> l'élément aura la couleur blanche. Cela signifie que la définition d'une couleur sur <p> n'affecte pas les éléments contenant <a>.

Considérez ce qui suit:

a { 
 
    color: blue; 
 
} 
 

 
p { 
 
    color:red; 
 
}

<div id="textDiv"> 
 
    <p><a href="link1.html">link1</a></p> 
 
</div>

Notez que même si vous définissez <p> d'utiliser la couleur rouge, la couleur de l'élément le <a> intérieur aura priorité.

Vous pouvez remplacer cette couleur en définissant un sélecteur avec une plus grande spécificité, comme ceci:

a { 
 
    color: blue; 
 
} 
 

 
p a { 
 
    color: red; 
 
}

<div id="textDiv"> 
 
    <p><a href="link1.html">link1</a></p> 
 
</div>

En d'autres termes, appliquer la couleur rouge à tout élément <a> qui est un enfant de un élément <p>. Veuillez lire les ressources suivantes sur css selectors et selector specificity.

Answer 2

Si votre lien est imbriquée dans une balise p qui a une classe ou ID comme

<p id="x1"><a href="#">Some Link</a></p> 

, vous pouvez utiliser ce sélecteur pour répondre à la balise:

#x1 a:link { color: green; } 

(c.-à-a tag à l'intérieur un élément avec l'ID x1)

Answer 3

Cela ne fonctionne pas lorsque vous appliquez le style au parent <p>, en raison de la nature en cascade de CSS. Les balises d'ancrage de conception (<a>) ont l'attribut CSS color rempli par la feuille de style User-Agent, qui est comme une feuille de style par défaut, stockée avec les ressources de votre navigateur. Lorsque vous appliquez color: green au parent de l'ancre, vous remarquerez que le texte à l'intérieur du <p>, mais pas à l'intérieur du <a> aura une couleur verte. Alors que color est hérité, il ne remplace pas les styles par défaut lorsqu'il est hérité, vous devrez donc l'appliquer directement à votre élément.

Je ne suis pas sûr de votre cas d'utilisation, mais appliquer des styles directement à id n'est pas toujours la meilleure solution. Peut-être essayer d'ajouter un class à votre <a> s que vous voulez regarder vert. Pensez également à attribuer sélecteurs, si vous voulez sélectionner un point d'ancrage en fonction de ce qu'il lie à:

a[href=home] { 
    color: green; 
} 

Vous pouvez également augmenter la spécificité, qui remplacera le style par défaut des ancres, comme ceci:

#colorGreen a { 
    color: green; 
}