Warum wird meine Medienabfrageregel nicht priorisiert?

Ich verwende Medienabfragen, um meine Website responsefähig zu machen. In meinem CSS-Dokument sind die Medienabfragen unter allen anderen Stilen. Ich benutze diplay: keine; das funktioniert perfekt, aber auf einem anderen div die ursprüngliche breite hat Priorität, auch wenn ich die Browsergröße reduzieren.Warum wird meine Medienabfrageregel nicht priorisiert?

Bild von dev-Konsole:

Image of dev console

Muss ich wirklich !important zu jeder Medien Regel hinzufügen?

CSS:

@media screen and (max-width: 930px) { 

    /* INDEX */ 
nav ul { 
    display: none; 
} 

#sliderContainer { 
    width: 80%; 
    height: auto; 
} 


}

Quelle

2017-04-20 Xander

Haben Sie in Ihrer Browserkonsole überprüft, welcher Stil tatsächlich angewendet wird? –

Können Sie die Reihenfolge ändern, in der die Stylesheets geladen sind? Zur Klarstellung: Medienabfragen fügen keine Spezifität hinzu. Das bedeutet, dass eine Medienabfrage normalerweise erst nach der Regel wirksam werden muss, die sie überschreibt. Es sieht so aus, als ob die beiden Regeln in separaten Stylesheets liegen. Sie müssten sie neu anordnen, um die Kaskadierungsreihenfolge zu ändern. –

Oder erhöhen Sie Ihre Spezifität für den Selektor .... – DaniP

Die Regel in Zeile #112 in index.css auch durch #sliderContainer und nicht durch nav li angelegt wird, wie Sie in Ihrer Frage angeben (es können Sie auf dem Laufenden in dem Bild zu sehen ist). Weil es später erfüllt wird und dieselbe Spezifität hat, gilt es gilt.

Wenn Sie !important auf eine Regel platzieren, müssen Sie wahrscheinlich !important verwenden, wenn es außer Kraft zu setzen versucht, und bevor Sie es wissen, wird die Hälfte Ihrer Regeln !important und Befestigungs Ansprechbarkeit sein wird ein Alptraum sein. Erhöhen Sie entweder die Spezifität Ihrer Regel oder ändern Sie ihre Reihenfolge.

Sehr wichtige Anmerkung:@media Abfragen hinzufügen keine Spezifität zu CSS Regeln. Sie lassen sie nur anwenden (wenn die Bedingungen wahr sind) oder nicht (wenn sie nicht wahr sind).

Nützliche Anmerkung: Eine sehr gute Technik, um immer Spezifität Ihrer Wähler so gering wie möglich zu Ort, um Ihre benutzerdefinierte Stylesheets zuletzt innerhalb <head>, nach irgendwelchen Thema/Bibliotheken/plugins Sheets. Wann immer Sie etwas überschreiben müssen, kopieren Sie einfach den Selektor von der Stelle, an der er gerade definiert ist. Wenn Sie ihn nur in Ihr benutzerdefiniertes Stylesheet einfügen, erhält er Priorität ohne höhere Spezifität.

Quelle

2017-04-20 20:19:54

Wird es später erfüllt, weil es weiter unten im Blatt ist? becuase styles.css ist höher in der Kopfzeile als index.css Was würden Sie empfehlen, ist die beste Praxis, um sie zu arrangieren usw.? – Xander

Es wird später getroffen, weil 'styles.css' zuerst gelesen wird (höher im Header, wie Sie sagten) und' index.css' wird später gelesen (niedriger im Header). Ändern Sie ihre Reihenfolge in der Kopfzeile und die Regel in 'styles.css' wird angewendet. Ich füge noch eine Anmerkung zur Antwort hinzu (wie man die Spezifität deines Codes nicht erhöht. Gute Klärungsfrage! –

Danke @Andrei – Xander

Hinzufügen von wichtigen Tags zu Ihren Medien-Anfragen können notwendig sein, sollten Sie benötigen Stile von einer voreingestellten Vorlage oder Entwicklungsplattform zur Verfügung gestellt außer Kraft zu setzen. Zum Beispiel arbeite ich mit Squarespace und muss auf diese Weise ihre Standardstile von Zeit zu Zeit überschreiben - aber wie auch ich kann ich deine Abneigung dagegen verstehen.

Ich weiß, dass ich hier nicht "um Klärung bitten" soll, aber mein Mangel an Wiederholungen hindert mich daran, einfach einen Kommentar abzugeben: Arbeiten Sie an einer Web-Entwicklungsplattform ähnlich Squarespace, Weebly usw. und bringt das Anwenden des! wichtigen Tags tatsächlich das gewünschte Ergebnis?

Best,

Tyler

Quelle

2017-04-20 20:17:37 TCharb

Warum wird meine Medienabfrageregel nicht priorisiert?

Antwort

Verwandte Themen