@keyframesや@mediaなど、 @rulesにはどの程度の特異性がありますか？

@rules（@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>

特にそこに重要なルールがある場合、背景は赤であるべきだと思うかもしれません。 （ちなみに、！重要性は特殊性に影響しません。それはルールの問題です。）Firefoxでは赤ですが、Chromeでは緑です。したがって、これは注意を必要とする奇妙な現象です。 （Estelle Weylによると、それは少なくとも2014年以来バグでした。）

以上が@keyframesや@mediaなど、 @rulesにはどの程度の特異性がありますか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。