Problème avec la hiérarchie

Bonjour,

Il y a un truc sur lequel je butte : j'essaye de bien comprendre la hiérarchie mais là...
Pouvez vous m'expliquer pourquoi avec le code suivant, mon image à toujours une marge à droite ?

#promo img {
	float: left;
	margin: 0px 10px 0px 0px;
	}


.abc img {
	margin: 0px;
	color: #02a8c6;	 
}

<p class="abc"><a href="#"><img src="puce.gif">Truc</a></p>

Je me rends bien compte que l'image est influencée par #promo img mais pourquoi ne prend-t-elle pas en compte la class abc ?
Bigre je comprends rien !!!
Modifié par pan (19 Nov 2008 - 22:43)

Bonjour,

Je dirais que c'est normal

#id élément(img) = 101

.class élément(img) = 11

#id .class élément(img) = 111

Donc

#promo .abc img

http://openweb.eu.org/articles/cascade_css

knarf a écrit :
Bonjour,

Je dirais que c'est normal

#id élément(img) = 101

.class élément(img) = 11

#id .class élément(img) = 111

Donc

#promo .abc img

http://openweb.eu.org/articles/cascade_css

Pas simple à comprendre mais excellent !
Cet article est crucial pour tout comprendre : MERCI !

Alors pour ceci :

#pouet  img{
               margin: 0px;
}

.truc img{
              margin: 5px;
}

qu'est-ce qui va l'emporter ?
Modifié par pan (21 Nov 2008 - 16:16)

pan a écrit :
Alors pour ceci :

#pouet  img{
               margin: 0px;
}

.truc img{
              margin: 5px;
}

qu'est-ce qui va l'emporter ?

La première déclaration.

Alors c'est bien là que je comprends plus :

Je suis d'accord que si l'on applique la règle de tri on a :
#pouet img = 0101
et
.truc img = 0011
donc le premier l'emporte et c'est normal.

Mais si je veux appliquer une classe particulière à une image dans ma div #pouet je fais comment ?

pan a écrit :
Alors pour ceci :

#pouet  img{
               margin: 0px;
}

.truc img{
              margin: 5px;
}

qu'est-ce qui va l'emporter ?

L'empereur est plus fort que Dark Vador (on est vendredÿ)

pan a écrit :
Alors c'est bien là que je comprends plus :

Je suis d'accord que si l'on applique la règle de tri on a :
#pouet img = 0101
et
.truc img = 0011
donc le premier l'emporte et c'est normal.

Mais si je veux appliquer une classe particulière à une image dans ma div #pouet je fais comment ?

Tu choisis un sélecteur de poids strictement supérieur à 0101 (ou égal à 0101 mais lu par le navigateur après)
0110 ou 0111 sont supérieurs, genre:

#pouet img.truc {}
#pouet .truc img {}
#pouet .truc {}

Modifié par Felipe (21 Nov 2008 - 17:14)