probobly un problème CSS assez simple

Question

Je cette CSS règle pour obtenir l'effet « poussé vers le bas » sur les liens pressés:

a:active { 
    position: relative; 
    top: 1px; 
} 

Maintenant, cela fonctionne comme prévu, mais je veux écrire une règle qui désactivent ceci sur des images liées comme celle-ci:

<a href="#"><img src="..." /></a> 

Est-ce possible?

Merci.

Answer 1

Vous pouvez inverser l'effet sur l'enfant:

a:active img { 
    position: relative; 
    top: -1px; 
} 

Answer 2

Je crois que vous pouvez changer votre style initial:

a { 
    padding-bottom: 1px; 
} 

a:active { 
    padding-top: 1px; 
    padding-bottom: 0; 
} 

puis l'utiliser pour l'image:

a:active img { 
    position: relative; 
    top: -1px; 
} 

Je n'ai pas encore eu l'occasion de le tester, mais je pense que ça devrait le faire.

Answer 3

Je n'ai pas essayé cela, mais je pense que cela devrait fonctionner.

a:active { 
    position: relative; 
    top: 1px; 
} 

a:active img{ 
    position: relative; 
    top: -1px; 
} 

L'autre solution consiste à ajouter une classe aux tous les a balises qui contiennent des images

Answer 4

Malheureusement il n'y a pas encore un sélecteur pour différencier texte uniquement des liens vers des liens d'image. Cependant, vous pourriez sortir avec ceci:

p a:active { 
    position: relative; 
    top: 1px; 
} 

Si vos liens sont tous contenus dans les balises de paragraphe cela fonctionne, et n'affectera pas vos balises d'image. Vous pouvez en créer un pour H1, H2, etc. pour tous les tags que vous devez inclure.