Problème de calcul de specificité CSS

Par Mohamed Belhassen, il y a 9 ans

Les bases HTML/CSS

Bonjour,

Voila je rencontre un petit problème avec mon code.

Considérons le code suivant:

<html> <head> <style type="text/css"> <!-- table.green {border: 0.2em solid green;} table {border: 0.2em dashed red;} html>table {border: 0.2em solid orange;} td#Type1{border: 0.2em dashed grey;} td.Type1{border: 0.2em dotted yellow;} td{border: 0.2em solid aqua;} *{color: firebrick;} /*R0:.............*/ [lang="ab"]{color: blue;} /*R1:.............*/ [lang="ar"]{color: orange;} /*R2:.............*/ [lang^="a"]{color: aqua !important;} /*R3:.............*/ [lang*="arabic"]{color: yellow;} /*R4:.............*/ [lang$="a"]{color: brown;} /*R5:.............*/ html body table [lang$="r"]{color: purple;} /*R6:.............*/ table>[lang$="r"]{color: skyblue;} /*R7:.............*/ body table [lang$="r"]{color: coral;} /*R8:.............*/ #Type1{ color: bisque;} /*R9:.............*/ .a2{color: magenta;} /*R10:.............*/ .Type1 .a2{color: palegreen;} /*R11:.............*/ .Type1 #Type1{ color: azure;} /*R12:.............*/ #Type1{ color: bisque;} /*R13:.............*/ html head body #Type1{ color: darkgray;} /*R14:.............*/ html>head+body { color: sandybrown;} /*R15:.............*/ body #Type1{ color: fuchsia;} /*R16:.............*/ body>#Type1{ color: darkcyan;} /*R17:.............*/ html>div.Type1{ color: salmon;} /*R18:.............*/ --> </style> </head> <body> <table> <tr id="L1"> <td class="Type1">A1</td> <td class="Type1 a2">A2</td> <td id="L1" class="Type2">A3</td> </tr> </table> <div class="Type1">Total2</div> Hello </body> </html>

J'aime bien calculer la priorité des de la cellule A1, le Mot Hello et Total 2.

J'ai mal à comprendre pourquoi ma première cellule du tableau (A1) s'affiche en firebrick.
En fait, si on calcule la specificité des différentes règles:

R0 a une spécificité égale à 0
R15 a une specificité de 3

Ce qui est bizarre encore que le Mot Hello et le mot Total 2 (se trouvant juste après le Tableau, les mêmes règles s'appliquent (R0 et R15) mais ils n'ont pas la même couleur !!!
Je suis vraiment perdu avec ce CSS.

Selon les règles de priorité de style R15 doit dominer normalement. Mais ici, je trouve que chrome et edge font de la sorte que R0 domine.

Pouvez vous m'aider à comprendre ce fait.

1 réponse

SLK, il y a 9 ans

Salut,

J'ai [du] mal à comprendre pourquoi ma première cellule du tableau (A1) s'affiche en firebrick.

il y a tellement de choses qui ne vont pas...

1) Tu écris des [lang="..."], alors que tu ne mets pas d'attribut "lang" dans ton HTML.
2) R6 semble ne servir à rien si on considère R8
3) tu confonds les "class" et les "id" ("." correspond aux "class", et "#" correspond aux "id")

4) .Type1 .a2

4) dans ton HTML, il n'y a aucune balise de classe "a2" imbriquée dans une classe "Type1"

5) html head body #Type1

5) Tu cherches la balise "body" dans la balise "head"... (ce qui n'a bien sûr pas de sens)

6) html>head+body

6) celle-ci semble être toujours vraie... (pas vraiment de sens...)

R0 a une spécificité égale à 0
R15 a une specificité de 3

Qu'est-ce que tu veux dire par "spécificité" ?

On ne comprend pas trop ce que tu demandes en fait...
On dirait que tu fais juste des tests au pif...
En soit, c'est bien de faire des tests, mais qu'est-ce que tu attends de nous ?

Il y a un article sympa sur les selecteurs CSS ici :
https://code.tutsplus.com/fr/tutorials/the-30-css-selectors-you-must-memorize--net-16048
Ça devrait t'aider.

Bon courage.