Les feuilles de style en cascade (CSS) sont un composant puissant du développement Web qui permet aux développeurs de déterminer l'apparence visuelle de leurs sites Web. En CSS, les classes servent de sélecteurs qui nous permettent d'appliquer plusieurs styles spécifiques à un élément. Vous pouvez également utiliser plusieurs classes pour des éléments spécifiques.

Cependant, lorsque vous appliquez plusieurs classes à un élément, il est nécessaire de savoir préciser l'ordre de rendu de ces classes pour éviter les écarts et les résultats inattendus. Dans cet article, nous aborderons les différentes manières de spécifier l'ordre des classes en CSS, ainsi que l'importance de la spécificité et des règles en cascade pour aider à déterminer les priorités.

Que sont les cours en CSS ?

En CSS, les classes sont des sélecteurs utilisés pour appliquer un ensemble spécifique de styles aux éléments HTML. Ce sont des outils puissants qui nous permettent de regrouper des éléments et de maintenir la cohérence entre plusieurs éléments d’une page Web. Cela nous permet de réutiliser les styles CSS sur de nombreux éléments d'un grand site Web.

Utilisez plusieurs classes pour un élément

Si vous définissez un ensemble de classes en CSS, vous pouvez les combiner pour un élément spécifique afin de le rendre unique et attrayant. Cependant, vous devez spécifier l'ordre des classes afin que le compilateur exécute le code de manière fluide et fournisse le résultat selon vos besoins. Cela se fait via les règlescascadeetspécificité.

L'ordre dans lequel nous définissons les classes dans un fichier CSS est utilisé pour déterminer leur priorité lorsque plusieurs classes sont appliquées à un élément. En effet, CSS esten cascade, ce qui signifie que le compilateur le lit dudernier vers le hautet dede droite à gauche. Par conséquent, lederniermentionné dans le code CSS obtient lapriorité.Comprenons mieux cela avec un exemple.

Exemple

Supposons que vous ayez deux classes définies dans votre fichier CSS.

   
  
 CSS Classes 
 
 Here, we have applied class1 to the div element. 
 
 Here, we have applied class2 to the div element. 
 
 This is an example. Here, we will apply both classes to the div element. 
  

Puisque.class2est déclaré après.class1dans le code CSS,class2est prioritaire. Ainsi, lorsque nous appliquonsclass1etclass2à un élément div, l'élément div est stylisé principalement en fonction declass2.

Cependant, vous pouvez voir que les attributs non mentionnés dansclass2mais présents dansclass1sont appliqués à l'élément div. Tout commetext-align: centerest mentionné dansclass1, mais pas dansclass2. Mais le dernier élément div est toujours aligné au centre. En effet, les seules propriétés declass1seront appliquées à l'élément telles quelles. Cependant, pour les propriétés identiques dans les deux classes, le compilateur utilise des règles en cascade pour les restituer. < /p>

Ordre des cours

L'ordre des classes écrites en HTML ne détermine pas la priorité. Considérez l'exemple suivant

Exemple

Supposons que vous définissiez deux classes similaires à l'exemple ci-dessus. Cependant, vous avez modifié l'ordre des classes dans le code HTML. Selon vous, quel sera le résultat ? Est-ce que ce sera différent d’avant ? Voyons.

   
  
 CSS Classes 
 
 This is an example. Here, we will apply first class1 and then class2 to the div element. 
 
 This is an example. Here, we will apply first class2 and then class1 to the div element. 
  

Comme vous pouvez le constater, les résultats sont inchangés. Les styles seront appliqués uniquement selon l'ordre des classes mentionné en CSS.

CSS ! Utilisation de règles importantes

En CSS, la règle !important permet aux développeurs de remplacer l'ordre en cascade des styles et de garantir que le style spécifique requis obtient la priorité la plus élevée.

Grammaire

selector{ property: value !important; }

Si vous utilisez le mot-clé !important à côté d'une propriété CSS, le compilateur veillera à ce qu'il soit appliqué à cet élément, quel que soit l'ordre spécifique des styles. Regardons un exemple.

Entrez

Original Linked List: 1 -> 2 -> 3 -> 4 -> 5 -> null

Exemple

Dans l'exemple suivant, puisquebvient avanta, le style sera appliqué en fonction dubdu dernier élément div. Cependant, lacouleurdu texte est appliquée telle qu'écrite en classe"a", ce qui signifie que la couleur du texte estrouge. En effet, nous utilisons le mot-clé!importantdans l'attributcolorde la classe"a".

   
  
 !Important Rule 
 
 Here, we have applied only class "a" to the div element. 
 
 Here, we have applied only class "b" to the div element. 
 
 Here, we have applied both the classes to the div element. 
  

Conclusion

Dans cet article, nous avons discuté des règles de cascade et de spécificité pour spécifier l'ordre des classes en CSS lors de l'application de plusieurs classes à un élément spécifique. Nous avons également discuté des règles!importantespour annuler une commande spécifique.

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!