ホームページ > ウェブフロントエンド > htmlチュートリアル > cssクラスセレクターのクラス名オーバーライド優先インスタンスの詳細説明

cssクラスセレクターのクラス名オーバーライド優先インスタンスの詳細説明

零下一度
リリース: 2017-06-24 13:47:56
オリジナル
2323 人が閲覧しました
  • コード

    <style>
       .a{
      background: red;
       }
       .b{
      background: yellow;
       }
    </style>
    <div class="a b">A</div>
    ログイン後にコピー
  • レンダリング効果
    cssクラスセレクターのクラス名オーバーライド優先インスタンスの詳細説明

    最初は、要素内のクラスクラスのクラス名の順序を変更すると、レンダリング効果は要素の順序に従って順番にレンダリングされると考えていました。クラス名

  • コード

    <style>
       .a{
      background: red;
       }
       .b{
      background: yellow;
       }
    </style>
    <div class="b a">A</div>
    ログイン後にコピー
  • レンダリング効果
    cssクラスセレクターのクラス名オーバーライド優先インスタンスの詳細説明

    要素クラス内のクラス名の順序を変更しても、レンダリング順序には影響しません

  • コード

       <style>
       .b{
      background: yellow;
       }
       .a{
      background: red;
       }
       </style>
    <div class="a b">A</div>
    ログイン後にコピー
  • レンダリング効果
    cssクラスセレクターのクラス名オーバーライド優先インスタンスの詳細説明

    スタイルシート内のクラスの順序を変更する レンダリング順序に影響します

    結論: 2 クラス内の同じ属性の適用順序は、CSS スタイルシートの下から上になります

以上がcssクラスセレクターのクラス名オーバーライド優先インスタンスの詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート