<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:hover
p: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*/
/* */
