Forum : Problème de calcul de specificité CSS

Bonjour,

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

Considérons le code suivant:

<html> <head> <style type="text/css">  </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.

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...

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

.Type1 .a2

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

html head body #Type1

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

html>head+body

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.

Problème de calcul de specificité CSS

1 réponse