Bonjour,
j'essai de me mettre au clair avec le poids des sélecteurs CSS2.1 et CSS3, mais j'ai quelques doutes.
Sur le site du W3C, il est écrit que les pseudo-elements ont le même poids que les éléments (http://www.w3.org/TR/selectors/#specificity).
J'ai fait un test avec le HTML/CSS suivant :
HTML
CSS
Dans cet exemple, le sélecteur le plus haut écrase toujours celui du dessous. Tout fonctionne donc logiquement sauf les pseudo-elements :first-letter et :first-line qui s'appliquent même placés avant le !important.
Je pense qu'il y a une explication toute bête, mais je ne vois pas... Qu'en pensez-vous ?
Modifié par dgilz (25 Jan 2012 - 09:15)
j'essai de me mettre au clair avec le poids des sélecteurs CSS2.1 et CSS3, mais j'ai quelques doutes.
Sur le site du W3C, il est écrit que les pseudo-elements ont le même poids que les éléments (http://www.w3.org/TR/selectors/#specificity).
J'ai fait un test avec le HTML/CSS suivant :
HTML
<p class="para" id="parag">Paragraphe 1</p>
CSS
:first-letter,
::first-letter {color: silver}
:first-line,
::first-line {color: green}
p {color:orange !important}
#parag {color: yellow}
.para,
[class],
[class="para"],
:first-child,
:nth-child(1),
:nth-of-type(odd),
:nth-of-type(1) {color: lime}
p {color:aqua}
* {color:red}
Dans cet exemple, le sélecteur le plus haut écrase toujours celui du dessous. Tout fonctionne donc logiquement sauf les pseudo-elements :first-letter et :first-line qui s'appliquent même placés avant le !important.
Je pense qu'il y a une explication toute bête, mais je ne vois pas... Qu'en pensez-vous ?
Modifié par dgilz (25 Jan 2012 - 09:15)