Wie viel Spezifität haben @rules, wie @keyframes und @media?

Diese Frage wurde mir neulich gestellt. Mein erster Gedanke war: * seltsame Frage! * Spezifität bezieht sich auf Selektoren, und at-rules sind keine Selektoren, also... irrelevant?

Um das zu beweisen, können wir denselben Selektor innerhalb und außerhalb einer At-Rule verwenden und sehen, ob dies die Spezifität zu beeinflussen scheint.

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

Der Hintergrund ist schwarz. Aber... liegt das daran, dass die Media-Query die Spezifität erhöht? Wechseln wir sie.

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

Der Hintergrund ist rot, also nein. Der rote Hintergrund gewinnt hier, einfach weil er später in der Stylesheet steht. Die Media-Query hat keinen Einfluss auf die Spezifität.

Wenn es sich so anfühlt, als ob Selektoren die Spezifität erhöhen und andere Stile mit demselben Selektor überschreiben, liegt es wahrscheinlich einfach daran, dass sie später in der Stylesheet kommen.

Dennoch hat mich das @keyframes in der ursprünglichen Frage zum Nachdenken gebracht. Keyframes können natürlich Stile beeinflussen. Nicht die Spezifität, aber es kann sich anfühlen wie Spezifität, wenn die Stile letztendlich überschrieben werden.

Siehe dieses winzige Beispiel

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

Man würde denken, der Hintergrund wäre rot, besonders mit der !important Regel dort. (Übrigens, !important beeinflusst die Spezifität nicht; es ist eine pro-Regel-Angelegenheit.) Er ist rot in Firefox, aber grün in Chrome. Das ist also eine komische Sache, auf die man achten muss. (Es ist laut Estelle Weyl seit mindestens 2014 ein Fehler.)