Pourquoi les règles CSS classiques remplacent-elles les requêtes multimédias en CSS ?

Requêtes multimédias et priorité CSS

En CSS, les requêtes multimédias sont moins prioritaires que les règles CSS classiques. Ceci est déterminé par la CSS Cascade, un ensemble de règles qui dictent l'ordre dans lequel les styles sont appliqués.

Pourquoi les requêtes multimédias ont moins de priorité

Les requêtes multimédias ne le sont pas augmenter la spécificité des sélecteurs. Cela signifie que si une règle CSS standard et une requête média ciblent le même élément avec la même spécificité, la règle CSS standard aura priorité.

Exemple :

Considérez le code suivant :

.logo img {
  width: 100%;
}

@media screen and (min-width: 100px) and (max-width: 1499px) {
  .logo img {
    width: 120%;
  }
}

Dans cet exemple, la requête multimédia a moins de priorité que la règle de requête non multimédia. Par conséquent, lorsque la taille de la fenêtre d'affichage correspond à la requête multimédia, la règle de requête non multimédia s'appliquera toujours, ce qui entraînera la définition de la largeur de l'image à 100 %.

Solutions de contournement

Pour donner la priorité aux requêtes multimédias par rapport aux règles CSS classiques, il existe deux options :

1. Permuter l'ordre des règles

Réorganisez les règles CSS afin que la requête multimédia vienne après la règle de requête non multimédia :

.logo img {
  width: 100%;
}

@media screen and (min-width: 100px) and (max-width: 1499px) {
  .logo img {
    width: 120%;
  }
}

2. Augmenter la spécificité du sélecteur

Augmentez la spécificité de la règle de requête multimédia en ajoutant des sélecteurs supplémentaires :

@media screen and (min-width: 100px) and (max-width: 1499px) {
  .logo a img {
    width: 120%;
  }
}

Éviter !important

Faire n'utilisez pas la déclaration "! Important" pour remplacer la priorité des requêtes multimédias. Cela entraînera une utilisation excessive de "!important" et rendra difficile la gestion de la spécificité 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!