Explication détaillée de la prononciation de la priorité CSS. La priorité CSS comprend quatre niveaux (sélecteur dans le texte, sélecteur d'ID, sélecteur de classe, sélecteur d'élément) et le nombre d'occurrences de chaque niveau. La priorité du CSS est calculée en fonction du nombre d'occurrences de ces quatre niveaux.
La lecture prioritaire doit être divisée en « groupes ». Les groupes sont indépendants les uns des autres et comparés de gauche à droite. Ils apparaissent en groupes, séparés par des virgules.
sélecteur ( a , b , c , d )
comparer : ↑ , ↑ , ↑ , ↑
sélecteur ( a , b , c , d )
Comme le montre le texte original de w3c.org, il est divisé en quatre groupes a, b, c et d, qui sont tous des entiers positifs. La valeur par défaut est 0, ce qui correspond à différentes structures de sélection et formes de composition. Lorsque vous comparez les priorités entre les sélecteurs, comparez-les de gauche à droite. Lorsque la comparaison est plus grande, la comparaison peut être arrêtée.
li.red.level {} /* a=0 b=0 c=2 d=1 -> spécificité = 0 , 0 , 2 , 1 */
/*comparer ↑ , ↑ , √ */
h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 -> spécificité = 0 , 0 , 1 , 1 */
/*comparer ↑ , ↑ , ↑ , √ */
ul ol li.red {} /* a=0 b=0 c=1 d=3 -> spécificité = 0 , 0 , 1 , 3 */
/*comparer ↑ , ↑ , √ */
#x34y {} /* a=0 b=1 c=0 d=0 -> spécificité = 0 , 1 , 0 , 0 */
/*comparer ↑ , √ */
style="" /* a=1 b=0 c=0 d=0 -> spécificité = 1 , 0 , 0 , 0 */
(Dans le tableau ci-dessus, ↑ signifie que la comparaison est toujours nécessaire, et √ signifie que le des résultats ont été obtenus à partir d'ici result)
De plus, tant qu'elle est écrite correctement, la structure du sélecteur ne peut être connue approximativement qu'à partir de la priorité, comme :
1,0,0,0 indique le style au sein de l'élément ;
0,2,1,1 représente un sélecteur composé de deux sélecteurs d'ID, un sélecteur de classe ou de pseudo-classe ou d'attribut et un sélecteur d'élément.
Détails des règles de priorité CSS :
Après avoir corrigé la prononciation, nous pouvons commencer à parler des règles détaillées :
La valeur du groupe a ne sera que 1 lorsque CSS est écrit dans l'attribut style, sinon elle sera 0. L'instruction de style écrite dans style n'est pas réellement un sélecteur, donc les valeurs du groupe b, c et d ici sont tous 0, et seulement les valeurs réelles. Seul le sélecteur aura les valeurs du groupe b, c, d.
La valeur du groupe b est déterminée par le sélecteur d'ID #ID, le nombre de sélecteurs d'ID et la valeur du groupe sera accumulée ;
Le groupe de valeurs c est déterminé par le sélecteur de classe, de pseudo-classe et d'attribut, et le groupe de valeurs sera accumulé ;
Le groupe de valeurs d est déterminé par le nom de l'élément, c'est-à-dire le sélecteur d'élément, et le groupe de valeurs sera accumulé ;
A noter que ces quatre jeux de valeurs correspondent à différents types de sélecteurs et ne s'influencent pas. Ils sont comparés selon les règles de lecture.
!important, le principe de proximité et l'héritage ne sont pas abordés ici, et il n'y a pas d'exemple de code. Tout le monde est invité à venir sur webjx.com pour en discuter !
Voici quelques exemples : Problèmes de priorité CSS La priorité CSS comprend quatre niveaux (sélecteur de texte, sélecteur d'ID, sélecteur de classe, sélecteur d'élément) et le nombre d'occurrences de chaque niveau. La priorité du CSS est calculée en fonction du nombre d'occurrences de ces quatre niveaux.
Les règles de calcul de la priorité CSS sont les suivantes :
* Le style défini dans la page, ajoutez 1,0,0,0
* Pour chaque sélecteur d'ID (tel que #id), ajoutez 0,1,0,0
* Ajoutez 0,0,1,0 à chaque sélecteur de classe (tel que .class), à chaque sélecteur d'attribut (tel que [attribute=]) et à chaque pseudo-classe (telle que : survol)
* Pour chaque sélecteur d'élément (tel que p) ou sélecteur de pseudo-élément (tel que : firstchild), ajoutez 0,0,0,1
Ensuite, ajoutez ces quatre nombres séparément pour obtenir la valeur de chaque priorité définie par CSS.
Comparez ensuite la taille petit à petit de gauche à droite. Le style CSS avec le plus grand nombre aura une priorité plus élevée.