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 à <div style="color: red">blah</div>, tandis que les définitions externes font référence à des règles définies via les balises <link> ou <style>.
Il y a avant tout des règles de déclaration !importantes.
Si les déclarations !important sont en conflit, la priorité est comparée.
Si les priorités sont les mêmes, elles seront déterminées dans l'ordre dans lequel elles apparaissent dans le code source, les dernières étant prioritaires.
Les styles dérivés de l'héritage n'ont pas de calculs de spécificité, qui sont inférieurs à toutes les autres règles (telles que celles définies par le sélecteur global *).
Concernant les styles externes chargés via @import, puisque @import doit apparaître avant toutes les autres définitions de règles (sinon, le navigateur doit l'ignorer), donc selon le principe du dernier arrivé, premier servi, les conflits de priorité prévaudront généralement.
Je dois mentionner ici qu'IE peut reconnaître @import dans la mauvaise position, mais peu importe où se trouve @import, il le considère comme étant avant toutes les autres définitions de règles, ce qui peut provoquer des malentendus.
Par conséquent, même si la question prioritaire semble simple, elle repose néanmoins sur un mécanisme assez complexe qui nécessite plus d’attention.