@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中文網其他相關文章！