css - メディアスタイルシートのa：hoverを削除しますか？

Question

メディアクエリCSSファイルのメインCSSファイルに記載されているスタイルエントリを削除するにはどうすればよいですか？

たとえば、タッチデバイスで使用するためにa：hoverエントリを削除したいと思います。

main.css：a:hover {color:#999999; background:#111111;}

media.cssでこれをキャンセルするにはどうすればよいですか？

Answer 1

CSSルールを「削除」することはできません。¹カスケードはそのようには機能しません。

メディアクエリが満たされない場合にのみルールを適用する唯一の方法は、@mediamain.cssスタイルシート内のブロックのいずれかで、否定されたバージョンのクエリでルールを分離することです。

@media not [your media query] {
    a:hover {color:#999999; background:#111111;}
}

または、ページヘッド内の別のスタイルシートで：

<link rel="stylesheet" media="all" href="main.css">
<link rel="stylesheet" media="[your media query]" href="media.css">

<!-- Or put this in a separate file and link to it as above -->
<style media="not [your media query]">
a:hover {color:#999999; background:#111111;}
</style>

または、media.cssスタイルシート内のスタイルを元に戻すこともできますが、その欠点は、フォールバックする値を知っている必要があることです。

---

¹ _{デスクトップブラウザの開発者ツールを除いて、多分。}

Answer 2

あなたの選択肢は特異性または重要性です。または、同じ特異性がある場合は、メインスタイルシートの後にメディアクエリスタイルシートを追加するだけです。

Answer 3

私が見つけた最良のオプションは、最初にメディアクエリを使用してホバー状態を設定することでした

@media screen and (min-width: 800px){
  a:hover {color:#999999; background:#111111;}
}

「min-width」を使用すると、デスクトップでホバー状態を設定できますが、画面が800px（またはブレークポイントが何であれ）を下回るとすぐに、すべてのホバー状態が無効になり、そこからスタイルを正確に設定できます。