28172 sujets

CSS et mise en forme, CSS3

Priorité des class ! truc zarbi [resolu]

Bonjour

J'ai un problème de priorité de class, pourtant simple ...
Normalement avec le code si dessous.. la class sur le lien est Colors_Dialog on devrait avoir le lien en rouge et si on passe dessus il devrait passer au bleu.
Et curieusement ça garde la class parent Colors_Content_A et je comprends pas pourquoi je ne suis pourtant pas un débutant ...2 jours que je seche .... ça dois me bruler les yeux .... est ce quelqu'un aurait une idée ? merci d'avance
<html>
  <head>
    <title>Exemple</title>
    <style type="text/css">
      

/*Colors Dialog*/
.Colors_Dialog {
	background-color:#1f1f1f;
	color:#fff;
}

.Colors_Dialog a{
	color: red;
}

.Colors_Dialog  a:hover{
	color: blue;
}

/*Colors ContentA*/
.Colors_Content_A {
	background-color:#eee; 
	color:Black;
}

.Colors_Content_A a {
	color: #023548;
}

.Colors_Content_A a:hover {
	color: #15ADFF;
}

    </style>
  </head>
  <body>
    <p>Text</p>
    <div class="Colors_Content_A">
	<div class="Colors_Dialog">
		<a href="#">Lire la news</a>
	</div>
    </div>
  </body>
</html>

Modifié par thyphoon (19 Sep 2009 - 06:19)
Bonjour thyphoon,

Il me semble que le poids des déclarations et équivalent et que la dernière déclaration écrase logiquement la première (si tu inverses l'ordre de ces déclarations tu obtiens ce que tu recherches...).
Soit tu cibles plus précisémment encore ces liens :

div.Colors_Dialog {blablabla;}
Et la suite...

Soit tu utilises des identifants.

Analyse très rapide à prendre pour ce qu'elle vaut Smiley cligne

ps:manque un "r" à hover"

Cdt,
Sylvain
merci beaucoup pour ta reponse !

je pensais que pourtant en faisant cette imbrication de Div 


<div class="Colors_Content_A"> 
    <div class="Colors_Dialog"> 
        <a href="#">Lire la news</a> 
    </div> 
 </div>

Colors_Dialog étant la dernière class appelée avant le lien, elle écrasait donc Colors_Content_A c'est pas ça ????? Smiley sweatdrop
thyphoon a écrit :
merci beaucoup pour ta reponse !
je pensais que pourtant en faisant cette imbrication de Div 

<div class="Colors_Content_A"> 
    <div class="Colors_Dialog"> 
        <a href="#">Lire la news</a> 
    </div> 
 </div>

Colors_Dialog étant la dernière class appelée avant le lien, elle écrasait donc Colors_Content_A c'est pas ça ????? Smiley sweatdrop

C'est (ici) l'ordre des déclarations dans ta feuille de styles et la priorité ("le poids") qui a ici une importance, ce n'est évidemment pas aussi simple, il y a quelques subtilités, à lire :
http://openweb.eu.org/articles/cascade_css

Cdt,
Sylvain
merci beaucoup !

moi qui croyait avoir tout compris au css ... Comme quoi j'ai encore du boulot... Je vais relire de ce pas lle lien que tu m'as donné !

Encore merci !
Moi je continue à tiquer sur:
.Colors_Dialog a:hove{       /* Manque une lettre -> pseudo-classe inconnue. */ 
    color: blue;/*#fff*/;;   /* Trois points-virgule à la suite, soyons fous! */
}

Modifié par Florent V. (18 Sep 2009 - 21:34)
Florent V. a écrit :
Moi je continue à tiquer sur:
.Colors_Dialog a:hove{       /* Manque une lettre -> pseudo-classe inconnue. */ 
    color: blue;/*#fff*/;;   /* Trois points-virgule à la suite, soyons fous! */
}

Erreurs du au nettoyage de mon css pour le mettre sur le forum. je suis aller un peu vite ... Smiley decu Désolé la prochaine fois je ferais plus attention. je vais corriger ces erreurs dans le code. Je suis le premier d'habitude a dire que lorsqu'on demande de l'aide sur un forum, qu'il faut soigner sa question, pour que ceux qui aident, n'aient pas a deviner ou a perdre du temps dessus. Smiley confused désolé !
Modifié par thyphoon (19 Sep 2009 - 06:22)
Sujet clos
Aller à