コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > 疑似クラスと疑似要素の重み

疑似クラスと疑似要素の重み

php中世界最好的语言
リリース： 2018-03-12 16:32:55
オリジナル
1740 人が閲覧しました

今回は、疑似クラスと疑似要素の重みについて説明します。疑似クラスと疑似要素の重みを使用する際の注意事項は何ですか?実際のケースを見てみましょう。 

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{            margin: 0;            padding: 0;
        }        #a .b a{ 
            color: yellow;
        }        .b a{   
            color: pink;
        }        a:hover{ 
            color: red;
        }        /*
            分析：
            规则1：伪类(像:hover,:visited,:active,:link)的权重和类选择器是一样的
            规则2：伪元素，像before,after优先级和标签选择器是一样的(这一条了解一下，和这道题无关)
            
            #a .b a 的权重为：(0,1,1,1)
            .b a的权重为：(0,0,1,1)
            a:hover的权重为：(0,0,1,1)

            结论：
            #a .b a 的权重最高，所以，如果有这个样式的设置，页面上的a链接是黄色的，鼠标hover上去也是黄色的
            如果把#a .b a去掉，.b a的权重和a:hover的权重一致，那他们就看谁在最后面，在最后面写的会层叠掉前面的

         */
    </style></head><body>
    <div class="a" id="a">
        <div class="b"><a href="#">我是链接</a></div>
    </div></body></html>
ログイン後にコピー

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

関連記事:

Rxjsの使い方の詳しい説明

Pythonで書かれた通知バースクリプト起動ツール

flv.jsとvideo.jsを使ってライブビデオエフェクトを作成する

以上が疑似クラスと疑似要素の重みの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
疑似クラス 要素 重み
ソース：php.cn
前の記事：vueのライフサイクルフック機能の詳細説明 次の記事：Vue実践まとめmvvm学習
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
戻り値の変数の形式は何ですか? 私はphpの初心者です。コードを見つけました: if($x<time()){return[false,'error'];} ロジックや変数は重要ではありませんが、[false...
から 2024-04-06 21:55:20
0
1
778
Laravel 8 - /{editable_text} ルートを /{user} ルートにリダイレクトする方法 ユーザープロファイルに誘導するリダイレクトルートを作成しようとしています。リダイレクト ルートはユーザー データベースからの文字列/テキストである必要があり、同じユーザー プロファ...
から 2024-04-06 17:26:11
0
1
410
Javascript/Jqueryを使用してボタンなしでフォームを送信する JavaScript 関数を呼び出し、JQUERY/PHP を使用してフォームを実行することにより、ボタンのないフォームを送信しようとしています。ページを再読み込みせずに、バックエ...
から 2024-04-06 14:54:03
0
2
421
単体テストの OverflowException: 最大再試行回数が 10,000 回に達しましたが、一意の値がまだ見つかりません そこで、新しい機能を実装する前に単体テストを行っています。テストを実行しましたが、OverflowException で失敗しました: 最大再試行回数が 10000 に達しましたが...
から 2024-04-06 11:27:39
0
2
347
PHP HTTP リクエストはパラメータを無視します 質問を始める前に、私は長い間 PHP から離れていた後、PHP を再学習していることを述べておく必要があります。優しくしてください。また、curl などのライブラリを使用してこれら...
から 2024-04-05 10:54:48
0
1
3536
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート