コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > 本文

擬似クラスのホバーが無効、CSS_html/css_WEB-ITnoseの優先度について

WBOY
リリース： 2016-06-24 11:41:28
オリジナル
893 人が閲覧しました

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>        a:hover{            color: #B61D1D;        }        .tag_a{            color: #333;        }        .tag_ul a{            color: #333;        }    </style></head><body>    //hover失效    <ul class="tag_ul">        <li><a>用ul标签选中</a></li>    </ul>        //hover失效有效    <ul>        <li><a class="tag_a">用a标签选中</a></li>    </ul></body></html>
ログイン後にコピー


有没有大神 帮我解释一下 关于class的优先级！


回复讨论(解决方案)

  • 用a标签选中

    • 加上href 

    既然楼主自己都试出加class后有效，，，那就加个class不就好了。。。

    顺序为
     a 
    a:visited 
    a:hover
    a:active

    权重(摘自《CSS实战手册》)

     引入

        示例
            


                

                      
    • 111

      •                 
    • 222

      •                 
    • 333

      •             

            

    .nav li a {背景色: シルバー;}
    背景色セレクターの値でスタイルの重みを決定します
    スタイルの最も具体的なスタイルの属性は次のようになります。
    タグセレクター 1 ポイント
    クラス選択デバイス 10 ポイント
    1 つの ID で 100 ポイント
    組み込みスタイルの 1000 ポイント
    例
    navBox a
    10 + 1 = 11 ポイント
    .navBox .nav a
    10 + 10 + 1 = 21 ポイント
    .nav a
    10 + 1 = 11 ポイント
    .nav li a
    10 + 1 + 1 = 12 ポイント

    注
    1) 継承された属性には重み値がありません
    2)重み値が同じ場合、最後のスタイルが優先されます
    3) 最初にすべての外部スタイル シートをリストし、次に内部スタイルを含めます

    重み値を無視します

    説明
    CSS は重みを完全に無視する方法を提供します。
    特定の属性が別のより具体的なスタイルによってオーバーライドされないことを絶対に保証する必要がある場合、
    この手法を使用できます
    保護する必要がある属性が属性によって上書きされるのを避けるために、後で挿入する必要があります。
    例

    .navBox .nav a {background-color: red;}
    a {background-color: black! important;}


    関連ラベル：
    伪类hover失效，关于CSS的优先级
    ソース：php.cn
    前の記事：input_html/css_WEB-ITnose にテキストを表示するにはデフォルトで 2 つの方法があります 次の記事：シルバーの MacBook Air を作成するための純粋な CSS (フルバージョン)_html/css_WEB-ITnose
    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
    著者別の最新記事
    最新の問題
    function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
    から 2024-04-29 11:01:01
    0
    2
    2001
    Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
    から 2024-04-23 00:22:19
    0
    10
    2159
    子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
    から 2024-04-19 15:37:47
    0
    1
    1824
    親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
    から 2024-04-18 23:52:34
    0
    1
    1719
    CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
    から 2024-04-16 10:10:18
    0
    0
    1737
    関連トピック
    詳細>
    人気のおすすめ
    人気のチュートリアル
    詳細>
    関連するチュートリアル
    人気のおすすめ
    最新のコース
    最新のダウンロード
    詳細>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート