1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | <link rel="stylesheet" type="text/css" href="style.css">* {font-size: 14px;color:orange;} /* selectionne tout ne sert à rien seul */h1 { color: navy; } /* une balise*/li a {font-size: 10px;} /* espace -> sélectionne tous les a contenu dans un li, ne sélectionne pas le li */p > img {text-align: center;} /* La même chose, mais ne prends img que si tout de suite après p, pas d'autres balises sur le chemin */h1, h2, h3 {background-color: red;} /* sélectionne toutes les h1 et h2 et h3*/.message{ border: 1px solid black; background: white;}<div id="prix" class="message"> ... </div> /* affecte la class message au div*/<div id="qte" class="message"> ... </div> /* même class sur un autre div*/#msg2{ border: 1px solid black; } /* comme une classe mais doit être unique */<div id="mesg2"> ... </div> /* affecte le style mesg2 au div*/div[tarif] { color: blue; } /* tous les div qui ont un attribut tarif*/<div id="mesg3" tarif="3.20"> ... </div> /* affecte le style mesg3 au div*/div[code_postal="38500"] { color: red; } /* tous les div dont l'attribut code_postal vaut 38500*/<div id="mesg3" code_postal="38500"> ... </div> /* affecte le style mesg3 au div*/div[code_postal=^"38"] { color: pink; } /* tous les div dont l'attribut code_postal commence pas 38*/div[code_postal=~"38"] { color: pink; } /* tous les div dont l'attribut code_postal contient 38*/<div id="mesg3" code_postal="38 75 33 01"> ... </div> /* affecte le style mesg3 au div*/a {} a:hover {} a:visited a:active .menu a:hover {} div:hoverp:first-child /* premier sous-element*/p i:first-child /* premier sous-truc des i qui sont dans des p *//* si plusieurs règles s'appliquent à un même élément c'est la moins générale, la plus précise, qui l'emporte*/p{color:red;}.message{color:green;}<p class="message"></p> /* sera green*//* */ |
