Solution pour attribuer un problème de priorité dans l'écriture CSS

Cet article présente principalement la question de la priorité des attributs dans l'écriture CSS, en se concentrant sur le calcul hiérarchique et la relation d'héritage entre les éléments.Les amis dans le besoin peuvent s'y référer

Lorsque vous ajoutez un style à Lorsque vous trouvez cela. ça ne marche pas sur un élément, vous avez un problème de priorité. Alors, comment devrions-nous traiter les problèmes de priorité CSS ? Ci-dessous, j'ai résumé quelques règles courantes pour résoudre les problèmes de priorité CSS.

Distance de style
Nous pouvons ajouter des styles spécifiés aux éléments en utilisant des styles externes, des styles internes, des styles en ligne, etc. La priorité à ce stade est :

Style externe Cela devrait être plus facile à comprendre, c'est-à-dire que plus le style est proche de l'élément, plus la priorité est grande. Par exemple :

<style type="text/css">   
  p{color:blue;} //内部样式   
</style>   
<link rel="stylesheet" type="text/css" href="mystyle.css"/> //外部样式(color:green)   
<p style="color:red">my color</p>//内联样式

La priorité affichée à ce moment est rouge > Ma couleur apparaît donc comme rouge.

Méthode de calcul spéciale
Supposons qu'il y ait le code suivant :

<style type="text/css">   
  p p.classSelector {color: blue}   
  #idselector p {color: red}   
</style>   
<p id="idSelector">   
  <p class="classSelector">my color</p>   
</p>

Nous sommes confrontés au css suivant, comment déterminer la priorité ?

<style type="text/css">   
  p p.classSelector {color: blue}   
  #idselector p {color: red}   
</style>

Voici une méthode de calcul particulière :

éléments, pseudo-éléments : 1 – (0,0,0,1)
Classe, pseudo-classe, attributs : 1 – (0,0,1,0)
ID : 1 – (0,1,0,0)
style en ligne : 1 – (1,0,0,0)
Les attributs ici font référence à :

L'effet est le suivant :

La priorité est de Il augmente de haut en bas. Quant à la façon de calculer, le même exemple est donné :

p : 1 élément – ​​​​(0,0,0,1)
p : 1 élément – ​​(0,0,0 ,1)
#idSelector : 1 ID – (0,1,0,0)
p#idSelector : 1 élément, 1 ID – (0,1,0, 1)
p #idSelector p : 2 éléments, 1 ID – (0,1,0,2)
p #idSelector p.classSelector : 2 éléments, 1 classe, 1 ID – (0,1,1 , 2)
Regardons maintenant à nouveau l'exemple ci-dessus :

p p.classSelector {color: blue} - (0,0,0,1) + (0,0,0,1) + (0,0,1,0) = (0,0,1,2)   
#idselector p {color: red} - (0,1,0,0) + (0,0,0,1) = (0,1,0,1)

Puisque la priorité est (0,1,0,1) > 0, 0,1,2), on sait donc que la dernière couleur affichée est le rouge.

Héritage
L'héritage est un concept relativement facile à comprendre, c'est-à-dire que les éléments enfants hériteront du style de l'élément parent. Par exemple :

<p style="color:red">   
  <p>my color</p>   
</p>

Le span dans l'exemple ci-dessus héritera du style de l'élément parent p. Mais tous les attributs n'utiliseront pas l'héritage par défaut, comme les attributs margin et padding. Par exemple :

<p style="margin:10px;padding:10px">   
  <p>my color</p>   
</p>

À ce stade, l'élément p n'héritera pas des styles de marge et de remplissage de l'élément parent p, sauf si vous faites ceci :

<p style="margin:10px;padding:10px">   
  <p style="margin:inherit;padding:inherit">my color</p>   
</p>

Résumé
1. Trouvez d'abord tous les styles qui agissent sur l'élément. (N'ignorez pas les styles hérités)
2. Calculez la distance d'effet du style. Plus la distance est proche, plus la priorité est grande.
3. Utilisez des méthodes de calcul spéciales pour déterminer les styles à la même distance.
4. Si les résultats calculés sont les mêmes, le style déclaré ultérieurement remplace le style déclaré précédemment.
5. Si !important est défini dans un style, ce style prévaudra quelle que soit sa priorité. (Sauf absolument nécessaire, il est fortement déconseillé d'utiliser cette méthode, car c'est sans doute un usage qui n'est pas conforme à l'idée CSS)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!