Warum überschreiben reguläre CSS-Regeln Medienabfragen in CSS?

Medienabfragen und CSS-Priorität

In CSS werden Medienabfragen weniger priorisiert als normale CSS-Regeln. Dies wird durch die CSS-Kaskade bestimmt, eine Reihe von Regeln, die die Reihenfolge vorgeben, in der Stile angewendet werden.

Warum Medienabfragen eine geringere Priorität haben

Medienabfragen haben keine Priorität Erhöhen Sie die Spezifität von Selektoren. Das heißt, wenn eine reguläre CSS-Regel und eine Medienabfrage auf dasselbe Element mit derselben Spezifität abzielen, hat die reguläre CSS-Regel Vorrang.

Beispiel:

Bedenken Sie der folgende Code:

.logo img {
  width: 100%;
}

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

In diesem Beispiel hat die Medienabfrage eine geringere Priorität als die Nicht-Medienabfrageregel. Wenn daher die Größe des Ansichtsfensters mit der Medienabfrage übereinstimmt, gilt weiterhin die Nicht-Medien-Abfrageregel, was dazu führt, dass die Bildbreite auf 100 % gesetzt wird.

Problemumgehungen

Um Medienabfragen Vorrang vor regulären CSS-Regeln zu geben, gibt es zwei Möglichkeiten:

1. Reihenfolge der Regeln tauschen

Ordnen Sie die CSS-Regeln neu, sodass die Medienabfrage nach der Nicht-Medienabfrageregel kommt:

.logo img {
  width: 100%;
}

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

2. Erhöhen Sie die Selektorspezifität

Erhöhen Sie die Spezifität der Medienabfrageregel durch Hinzufügen zusätzlicher Selektoren:

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

Vermeiden Sie !important

Do Verwenden Sie die Deklaration „!important“ nicht, um die Priorität von Medienabfragen zu überschreiben. Dies führt zu einer übermäßigen Verwendung von „!important“ und erschwert die Verwaltung der CSS-Spezifität.

Das obige ist der detaillierte Inhalt vonWarum überschreiben reguläre CSS-Regeln Medienabfragen in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!