CSS導入方法の優先順位とセレクター別の優先順位の違い_html/css_WEB-ITnose
CSS を設定するには 3 つの基本的な方法があることは誰もが知っています。つまり、インラインは埋め込みとも呼ばれます:
<div style='background:red'></div>
2。 HTML ファイル 例:
<html> <style type='text/css'> div{ background:red; } </style></html>
3. リンクタグを使用して HTML ファイル内で参照されるリンクタイプ 問題は無視されます
これら 3 つのメソッドを同時に使用して同じファイルにスタイルを設定する場合ターゲット要素の優先順位は inline > inline > link です
一般に、同じ方法 (ファイル) で、誰が最も高い優先順位を持つかは、多くの人が知っています
しかし、多くの人は、セレクターが異なることを無視します。にも優先順位があります。
まず、css のセレクターの型を思い出してみましょう
#id name { 属性名: 属性値; }
.class name { 属性名: 属性値; }
タグ名 {属性名: 属性値; }
これらは 3 つの基本的なセレクターとそれらを組み合わせた複合セレクターです
CSS スタイル ファイルを作成し、それを css.html に導入します
<html> <link rel='stylesheet' type='text/css' href='style.css'/></html>
base.css ファイルは次のとおりです
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>css优先级讨论</title></head><link rel="stylesheet" type="text/css" href="base.css"/><body> <div id='red' class='blue' >颜色</div></body></html>
これら 3 つのスタイル設定はすべて 1 つの要素用であり、それらはすべてリンク ファイル内にありますが、ブラウザを実行した結果は
ID の選択を示しています。セレクターの優先度が最も高いことは、以下の図を参照してください。
この図を通じて、どの設定の優先度が高いのかもわかります。リンクは「埋め込み」よりも大きい可能性があります。実際には、問題が原因でこの種のエラーが発生することがよくあります。それでは、実際の例を見てみましょう
このページでは、「次へ」ボタンの color 属性が 3 回設定されており、それらはすべて Base.css にあります。このファイルでは、次の色の値は前の設定を上書きせず白になります。最初の円はクラス + ラベルの重み 11 を使用し、2 番目の円はクラスの重み 10 を使用し、最後の円はラベルの重み 10 を使用するためです。 1、これは当然最初です。 設定の効果的な解決策は非常に簡単です。 2 番目のセレクターを変更すると、結果は次のようになります。
重みの値が等しく、前部分がカバーされています。 以上です。エラー。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7563
15
1385
52
84
11
28
99
＆lt; Progress＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:34 PM
この記事では、HTML＆lt; Progress＆gt;について説明します。要素、その目的、スタイリング、および＆lt; meter＆gt;との違い要素。主な焦点は、＆lt; Progress＆gt;を使用することです。タスクの完了と＆lt; Meter＆gt; statiの場合
＆lt; datalist＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:33 PM
この記事では、HTML＆lt; Datalist＆GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。
＆lt; meter＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:35 PM
この記事では、html＆lt; meter＆gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化＆lt; Meter＆gt; ＆lt; Progress＆gt;およびex
HTMLは初心者のために簡単に学ぶことができますか？
Apr 07, 2025 am 12:11 AM
HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。
ビューポートメタタグとは何ですか？レスポンシブデザインにとってなぜそれが重要なのですか？
Mar 20, 2025 pm 05:56 PM
この記事では、モバイルデバイスのレスポンシブWebデザインに不可欠なViewportメタタグについて説明します。適切な使用により、最適なコンテンツのスケーリングとユーザーの相互作用が保証され、誤用が設計とアクセシビリティの問題につながる可能性があることを説明しています。
＆lt; iframe＆gt;の目的は何ですか タグ？使用する際のセキュリティ上の考慮事項は何ですか？
Mar 20, 2025 pm 06:05 PM
この記事では、＆lt; iframe＆gt;外部コンテンツをWebページ、その一般的な用途、セキュリティリスク、およびオブジェクトタグやAPIなどの代替案に埋め込む際のタグの目的。
HTML、CSS、およびJavaScriptの役割：コアの責任
Apr 08, 2025 pm 07:05 PM
HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。
HTMLでの開始タグの例は何ですか？
Apr 06, 2025 am 12:04 AM
Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。
