Wie viel Spezifität haben @Rules wie @Keyframes und @Media?

Wie besonders sind @Rules (wie @Keyframes und @Media)?

Jemand hat mir kürzlich diese Frage gestellt. Meine erste Reaktion war: ein seltsames Problem! Bei Spezialität geht es um Selektoren, und @ Regeln sind keine Selektoren, also ... spielt keine Rolle?

Um dies zu beweisen, können wir denselben Selektor innerhalb und außerhalb der @ -Regel verwenden, um festzustellen, ob es die Besonderheit beeinflusst.

 <code>body { background: red; } @media (min-width: 1px) { body { background: black; } }</code>

Der Hintergrund ist schwarz. Aber ... liegt das daran, dass die Medienabfrage die Spezifität erhöht? Lassen Sie uns die Bestellung austauschen.

 <code>@media (min-width: 1px) { body { background: black; } } body { background: red; }</code>

Der Hintergrund ist rot, also nicht. Der rote Hintergrund gewinnt nur, weil er wieder im Stilblatt ist. Medienanfragen beeinflussen keine Besonderheit.

Wenn es sich anfühlt, als würde der Selektor die Besonderheit verbessern und andere Stile mit demselben Selektor überschreiben, ist dies wahrscheinlich nur, weil er im Stylesheet rückwärts ist.

Trotzdem haben mich @Keyframes in der ursprünglichen Frage nachgedacht. Keyframes können natürlich den Stil beeinflussen. Keine Besonderheit, aber wenn der Stil endlich überschrieben wird, kann es sich wie eine Besonderheit anfühlen .

Bitte beachten Sie dieses kleine Beispiel:

 <code>@keyframes winner { 100% { background: green; } } body { background: red !important; animation: winner forwards; }</code>

Sie könnten denken, der Hintergrund sollte rot sein, insbesondere wenn es dort eine! Wichtige Regel gibt. (Übrigens,! Wichtig wirkt sich nicht auf Besonderheit aus; es ist eine Frage der Regeln.) In Firefox ist es rot, aber in Chrom ist es grün. Das ist also ein seltsames Phänomen, das Aufmerksamkeit braucht. (Laut Estelle Weyl ist es seit mindestens 2014 ein Fehler.)

Das obige ist der detaillierte Inhalt vonWie viel Spezifität haben @Rules wie @Keyframes und @Media?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!