検索

ホームページ >ウェブフロントエンド >htmlチュートリアル >セレクター priority_html/css_WEB-ITnose

セレクター priority_html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-24 11:21:461005ブラウズ

純粋な CSS ファイル

CSS ドキュメントを作成するとき、競合するスタイル定義が頻繁に発生します。この場合は、次のルールに従ってください。

  • HTML 要素に複数の CSS スタイルが定義されている場合、最後の CSS スタイルのみが表示されます。例: 

    p {color: red}p {color: blue}/* 效果为蓝色 */

  • CSS スタイルが DOM 要素の親ノードで定義されている場合、そのすべての要素はそのスタイルを継承します。

  • 同じ要素に対して異なる選択方法がある場合、計算は重みに基づいて行われます:

    • ID 属性=100
    • class 属性=10
    • HTMLa8093152e673feb7aba1828c43532094tag=1

  • 使用！ important タグはセレクターの優先順位を最上位に上げることができます。 

<body><p id="target" class="target">Hello World</p></body><style>   p#target {color: black !important}   p#target {color: red}   p.target {color: blue}   p {color: tomato}   /* Black color is applied */</style>

HTML ファイルでの CSS の使用

CSS ファイルを HTML にインポートするには、通常、次の順序で行います:

  1. 2cdf5bf648cf2f33323966d7f58a7f3f ;外部インポートスタイル
  2. 93f0f5c25f18dab9d176bd4f6de5d30e セクションに c9ccee2e6ea535a969eb3f532ad9fe89 を直接記述する
  3. CSS セクションの @import を通じて外部スタイルをインポートする
  4. HTML タグに style 属性を直接定義する

ただし、優先順位は確かに:

  1. HTML タグで直接定義された style 属性
  2. セクションに直接記述された
    3. CSS セクションの @import を通じてインポートされた外部スタイル
    4. < ; 2cdf5bf648cf2f33323966d7f58a7f3f を通じてインポートされた外部スタイルの一部
次のコード スニペットでは、CSS をインポートする 4 つの方法がすべて使用されており、最終的な効果は最上位の p タグのスタイル定義です。ただし、!重要が他の定義に含まれている場合を除きます。

りー

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：WebStorm 2016.1.2 EAP リリース_html/css_WEB-ITnose次の記事：WebStorm 2016.1.2 EAP リリース_html/css_WEB-ITnose

関連記事

続きを見る