WebCSSの優先度

複数の CSS スタイル ファイルが Web ページに読み込まれます。そのうちの 1 つは Ext ライブラリに付属するスタイル ファイルで、すべてのタグのいくつかのスタイルを定義しているため、元の Web ページが正しく表示されません。対応するスタイルを見つけると、正しいスタイルがリセットされます。新しいスタイルを body タグに追加しますが、2 つのスタイルが表示され、Ext スタイルはまだ有効です。新しいスタイルを設定するときに * を追加しなかったことに最終的に気づきましたが、これは body タグにのみ役に立ち、サブタグには役に立ちませんでした。以下は変更されたスタイルです

[css]  
.diy,  
.diy *{  
    box-sizing: content-box;  
    -moz-box-sizing : content-box;  
    -webkit-box-sizing: content-box;  
}

ラベルが複数のスタイルで定義されており、スタイル間で競合がある場合、優先順位は「ID に対して定義されたスタイル」>「クラスで定義されたスタイル」>「ラベルの種類」です。定義されたスタイル」。たとえば、次のスタイル

[css] 
div{  
    border:2px solid #0000FF;   
}  
  
  
.powerHeader{  
    border:2px solid #00ff00;   
}  
  
  
#navigation{  
    border:2px solid #ff0000;   
}

はタグ

内にあり、最初のスタイルは #navigation です。#navigation が存在しない場合、.powerHeader スタイルは次のようになります。適用され、最後に div スタイルが適用されます。

同時に、リンクまたはスタイルのみで定義された複数のタグクラス間に競合がある場合、最後に定義されたクラスが適用されます。

CSS スタイルの優先順位を理解すると、Web 開発における多くのスタイル競合の問題を回避できます。

関連ラベル：

css

ソース：php.cn

前の記事：CSS テキストの折り返しプロパティのワードラップと空白 次の記事：ul タグと li タグを使用して CSS 水平ナビゲーション メニューを作成します

このウェブサイトの声明

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

著者別の最新記事

• HTMLで太字、斜体、下線、取り消し線などのフォント効果を設定する例の紹介
  1970-01-01 08:00:00
• Java バージョンの Redis を実装する
  1970-01-01 08:00:00
• 最も単純な WeChat アプレットのデモ
  1970-01-01 08:00:00
• Pythonでのpandas.DataFrameの簡単な操作方法（作成、インデックス、追加、削除）の紹介
  1970-01-01 08:00:00
• WeChat ミニ プログラム: タブ効果の実装方法の例
  1970-01-01 08:00:00
• Python は辞書構造の出力を美しくするためのカスタム メソッドを構築します
  1970-01-01 08:00:00
• HTML5: Canvas を使用してビデオをリアルタイムで処理する
  1970-01-01 08:00:00
• Asp.net は SignalR を使用して画像を送信します
  1970-01-01 08:00:00
• WeChat ミニ プログラム開発チュートリアル - App() および Page() 関数の概要
  1970-01-01 08:00:00
• Python Redisの使い方を詳しく解説
  1970-01-01 08:00:00

最新の問題

CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア

から 2024-04-16 10:10:18

0

0

1335

ページが突然 CSS またはブートストラップを取得できなくなります それで、私はページを開発しています。昨日その一部を実行してうまくいきました。そして今日は残りの作業を続けましたが、すべてがうまくいきました。通常の HTML ページとして開こうとす...

から 2024-04-06 21:58:04

0

1

800

Javafx でインライン CSS スタイルを動的に変更する アプリケーションが最大化されているときにペインの背景画像を変更しようとしています。私の背景はインライン CSS を使用して設定されています。スタイル用に 2 つの異なる変数と if...

から 2024-04-06 20:57:16

0

1

487

CSS でフローティング要素を水平ではなく垂直にスタックするにはどうすればよいですか? 片側にメインコンテンツ、もう一方に追加コンテンツがある 2 つの列を持つ Web ページを作成しようとしています。ただし、float プロパティを使用して追加の列を左に揃えているた...

から 2024-04-06 20:45:26

0

2

386

他の CSS コードに関係なく、フレックスボックス内のテキストを強制的に垂直方向の中央に配置する方法はありますか? 開発中の Web サイトで使用されている大規模な CSS コードの一部である次の CSS コードがあります。 }.card-u{margin:20px;padding:20px;w...

から 2024-04-06 20:41:51

0

1

518

関連トピック

詳細>

• css
• CSS中心
• CSSに画像を挿入する方法
• CSSが表示を超えています...
• CSSフォントの色
• CSSとは何ですか
• CSSで三角形を書く方法
• CSSで文字の色を設定する