ホームページ > 記事 > ウェブフロントエンド > CSS導入方法の優先順位とセレクター別の優先順位の違い_html/css_WEB-ITnose
CSS導入方法の優先順位とセレクター別の優先順位の違い_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:44:301227ブラウズ
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 番目のセレクターを変更すると、結果は次のようになります。
重みの値が等しく、前部分がカバーされています。 以上です。エラー。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。