@rules具有多少特异性，例如@keyframes和@media？

@规则（如@keyframes和@media）的特殊性究竟有多高？

最近有人问了我这个问题。我第一反应是：奇怪的问题！ 特殊性是关于选择器的，而@规则不是选择器，所以……无关紧要？

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

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

背景是黑色。但是……这是因为媒体查询提高了特殊性吗？让我们交换一下顺序。

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

背景是红色，所以不是。红色背景获胜只是因为它在样式表中靠后。媒体查询不影响特殊性。

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

尽管如此，原始问题中的@keyframes让我开始思考。当然，关键帧可以影响样式。不是特殊性，但如果样式最终被覆盖，它可能会感觉像特殊性。

请看这个小例子：

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

你可能会认为背景应该是红色的，尤其是在那里有!important规则的情况下。（顺便说一句，!important不影响特殊性；它是一个针对规则的事情。）在Firefox中它是红色的，但在Chrome中它是绿色的。所以这是一个需要注意的奇怪现象。（根据Estelle Weyl的说法，至少从2014年起就是一个bug。）

以上是@rules具有多少特异性，例如@keyframes和@media？的详细内容。更多信息请关注PHP中文网其他相关文章！