CSS導入方法の優先順位とセレクター別の優先順位の違い_html/css

CSS導入方法の優先順位とセレクター別の優先順位の違い_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:44:30

オリジナル

1229 人が閲覧しました

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 番目のセレクターを変更すると、結果は次のようになります。

重みの値が等しく、前部分がカバーされています。以上です。エラー。