En CSS, je souhaite que tous les liens aient une propriété solid-bottom: 1px. Cependant, si j'ai une image liée, elle obtient également la bordure. Comment puis-je changer la propriété a si et seulement si elle contient un élément img?Comment faire correspondre un élément contenant un autre élément?
Essayez d'utiliser Descendant Selectors:
a img {
border-bottom: none;
}
Si elle ne semble pas fonctionner, assurez-vous que le sélecteur est correct (c.-à-fait référence à l'élément correct (s)) en mettant des déclarations folles dans qui fera clairement quels éléments sont affectés par le sélecteur:
a img {
color: red;
background-color: red;
border-bottom: none;
}
Lorsque le sélecteur fonctionne correctement, vous pouvez ensuite se concentrer sur la déclaration qui ne fonctionne pas (ne pas oublier de retirer les déclarations folles , bien que!). Il peut être être substituée quelque part, alors essayez d'ajouter !important à la fin de l'instruction:
border-bottom: none !important;
Si cela fonctionne, vous devez examiner soigneusement votre code CSS et réorganiser vos règles de style afin que vous n'êtes pas primordial cette règle.
Si cela ne fonctionne toujours pas, assurez-vous de remplacer la propriété correcte par la valeur correcte.
....
<style>
a{border-bottom: 1px solid;}
a img{border:none;}
</style>
Les sélecteurs d'attribut ne sont pas pris en charge dans tous les navigateurs. Rephrased: IE va barf dessus. –
@Squeegy: Vous avez raison mais je pense que tous les navigateurs modernes supportent que même IE7 mais pas IE6 (bien sûr), fixe de toute façon merci – Sarfraz
a { text-decoration: none }
vous voyez la décoration de texte souligné par défaut pour les liens. Toutefois, vous ne pouvez pas modifier le style des balises a si elles contiennent une balise img. CSS ne fonctionne pas comme ça. Vous pouvez ajouter une classe à n'importe quel a avec une image et affecter un style basé sur cela.
CSS
a.image { text-decoration: none }
HTML
<a href="foo" class="image"><img src="foo.jpg"/></a>
pourquoi ne pas envelopper les <img> dans un <span> puis utiliser le CSS
a {border-bottom: 1px solid #33ccff;}
span a {border: none;}
D'autant plus que la solution standard n » t travailler pour vous, du code serait très utile.
de prise de vue dans l'obscurité, ma suggestion est de spécifier la largeur de la bordure:
a { border-bottom: 1px solid blue; }
a img { border-width: 0 0 0 !important; }
ou
a img { border-bottom-width:0; }
Et à défaut ou l'autre de ceux-ci, je voudrais commencer à regarder tout autre styles qui seraient chevauchement (pas nécessairement hérité, affectant juste l'espace visuel sur hover), comme le remplissage et les marges et les couleurs d'arrière-plan des éléments contenant.
Déjà essayé. Je ne sais pas pourquoi mais ça ne marche pas. L'image n'a pas de bordure, mais pour une raison quelconque en bas, j'ai toujours une bordure. Firebug met uniquement en surbrillance la bordure lorsque je passe la souris sur l'étiquette. et seulement l'image si je passe la souris sur le tag img ...il semble donc que le a souligne les espaces. –
Il voit la décoration du texte, pas une vraie «bordure» –
@Squeegy: Je peux vous garantir que je vois la frontière, pas la décoration du texte. –