ホームページ > ウェブフロントエンド > htmlチュートリアル > CSS のアプリケーションを探索する ! important_html/css_WEB-ITnose

CSS のアプリケーションを探索する ! important_html/css_WEB-ITnose

WBOY
リリース: 2016-06-24 11:42:46
オリジナル
1189 人が閲覧しました

定義と構文:

! important は CSS1 で定義された構文です 指定されたスタイル ルールの適用優先​​度を高める機能です

文法形式: { cssRule ! important }、つまり、定義の最後に ! important を書きます。

例:

box{color:red ! important;}

互換性:

アプリケーションシナリオ:

シナリオ 1:

わかりました

<!--应用场景一--><div id="content">	<p class="p1">The daimler executive familiar with the collaboration said daimler and byd might display a prototype of the jointly developed car as early as the paris auto show in october. 熟悉合作情况的戴姆勒高管说,戴姆勒和比亚迪最早有可能于10月份在巴黎车展上展出这款合作开发汽车的样车。</p>	<p class="p2">The daimler executive familiar with the collaboration said daimler and byd might display a prototype of the jointly developed car as early as the paris auto show in october. 熟悉合作情况的戴姆勒高管说,戴姆勒和比亚迪最早有可能于10月份在巴黎车展上展出这款合作开发汽车的样车。</p></div>
ログイン後にコピー

表示効果:

注:

デフォルトでは、クラスの優先度はidよりも低いため、p1がクラスを使用して独自のスタイルを再定義しても、親属性が継承されている場合、この行は有効になりません。まだオレンジ色!
ただし、p2 では、重要度を上げて優先度を上げる (または強制再定義とみなす) ため、ここの CSS が有効になり、この行のテキストが青くなります。

シーン 2:

rree

    #content p{        color: orange;    }    .p1{color: blue;}    .p2{color:blue !important;}
ログイン後にコピー

ディスプレイエフェクト:

注:

複数のクラスが共同して特定のスタイルを制御する場合、要件を使用して、 !クラスでは
表示を優先することが重要です

オンラインデモ: http://codepen.io/anon/pen/OVjXPQ

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