Le problème de priorité est en fait un problème de résolution de conflit. Lorsque le même élément (ou contenu) est sélectionné par un sélecteur CSS, différentes règles CSS doivent être choisies en fonction de la priorité. De nombreux problèmes sont en réalité impliqués.
Le premier est la spécificité des règles CSS. CSS2.1 dispose d'un ensemble de méthodes de calcul de spécificité, qui est représentée par une chaîne numérique à quatre chiffres (CSS2 est à trois chiffres. En fin de compte, plus la spécificité est élevée, plus). spécial la règle. Dans la priorité Ce sera plus avantageux lors de la prise de jugement. Concernant le calcul spécifique de spécificité, il existe les règles générales suivantes pour l'addition numérique dans diverses situations :
pour chaque sélecteur d'ID (#someid), ajoutez 0,1,0,0.
Chaque sélecteur de classe (.someclass), chaque sélecteur d'attribut (formé comme [attr=""], etc.), chaque pseudo-classe (formé comme : hover, etc.) ajoute 0, 0, 1, 0
à chaque élément ou Les pseudo-éléments (:firstchild), etc., ajoutent 0,0,0,1
. Les autres sélecteurs incluent le sélecteur global *, ajoutent 0,0,0,0. Cela équivaut à ne pas l'ajouter, mais c'est aussi une sorte de spécificité, qui sera expliquée plus tard.
Selon ces règles, les chaînes de nombres sont ajoutées petit à petit pour obtenir la spécificité calculée finale, puis comparées petit à petit dans l'ordre de gauche à droite lors de la comparaison et du choix.
Donnons quelques exemples :
h1 {couleur : rouge ;}
/* Il n'y a qu'un seul bonus d'élément ordinaire, le résultat est 0,0,0,1 */
corps h1 {couleur : vert ;}
/* Ajoutez deux éléments ordinaires, le résultat est 0,0,0,2 */
--Ce dernier gagne
h2.grape {couleur : violet ;}
/* Un élément ordinaire et un sélecteur de classe sont ajoutés, et le résultat est 0,0,1,1*/
h2 {couleur : argent ;}
/*Un élément ordinaire, le résultat est 0,0,0,1 */
--Le premier gagne
html > body table tr[id="totals"] td ul > li {color: maroon;}
/* 7 éléments ordinaires, un sélecteur d'attribut, deux autres sélecteurs, le résultat est 0,0,1,7 */
li#answer {couleur : marine ;}
/* Un sélecteur ID, un sélecteur normal, le résultat est 0,1,0,1 */
--Ce dernier gagne
En plus de la spécificité, il existe d'autres
styles de style dans le texte de la règle qui ont une priorité de 1,0,0,0, ils sont donc toujours supérieurs aux définitions externes. Ici, les styles dans le texte font référence à des styles qui ressemblent à