@规则的具体性如何？例如@keyframes和@media？

前几天我收到了这个问题。我的第一反应是：奇怪的问题！ 具体性是关于选择器的，而@规则不是选择器，所以…… 不相关？

为了证明这一点，我们可以在@规则内和@规则外使用相同的选择器，看看它是否会影响具体性。

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

背景是黑色。但是…… 这是因为媒体查询提高了具体性吗？让我们将它们互换一下。

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

背景是红色，所以不是。红色背景之所以获胜，是因为它在样式表中排在后面。媒体查询不会影响具体性。

如果感觉选择器正在提高具体性并覆盖具有相同选择器的其他样式，这很可能是因为它在样式表中排在后面。

不过，原始问题中的@keyframes让我想了很多。当然，关键帧会影响样式。不是具体性，但如果最终覆盖了样式，它会感觉像具体性。

请参阅此 小型示例

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

您可能会认为背景应该是红色，尤其是使用!important规则的情况下。（顺便说一下，!important不会影响具体性；它是一个针对每个规则的设置。）在 Firefox 中它是红色的，但在 Chrome 中它是绿色的。所以这是一个需要注意的奇怪现象。（根据 Estelle Weyl 的说法，至少从 2014 年开始，这是一个错误。）