CSS記述時の属性優先度問題の解決策

この記事では、CSS記述における属性の優先順位の問題を主に紹介し、要素間の階層計算と継承関係に焦点を当てています。必要な友人はそれを参照してください

要素にスタイルを追加したが、それが機能する場合は、それは優先課題だ。では、CSS の優先順位の問題にどのように対処すればよいのでしょうか? 以下に、CSS の優先順位の問題を解決するための一般的なルールをいくつかまとめました。

スタイル距離
外部スタイル、内部スタイル、インラインスタイルなどを使用して、指定したスタイルを要素に追加できます。現時点での優先順位は次のとおりです。

外部スタイル つまり、スタイルが要素に近いほど優先順位が高くなります。例:

<style type="text/css">   
  p{color:blue;} //内部样式   
</style>   
<link rel="stylesheet" type="text/css" href="mystyle.css"/> //外部样式(color:green)   
<p style="color:red">my color</p>//内联样式

このとき表示される優先度は、赤>青>緑です。したがって、私の色は赤として表示されます。

特別な計算方法
次のコードがあるとします:

<style type="text/css">   
  p p.classSelector {color: blue}   
  #idselector p {color: red}   
</style>   
<p id="idSelector">   
  <p class="classSelector">my color</p>   
</p>

次のCSSに直面した場合、どのように優先度を決定するのでしょうか?

<style type="text/css">   
  p p.classSelector {color: blue}   
  #idselector p {color: red}   
</style>

ここに特別な計算方法があります:

要素、疑似要素: 1 – (0,0,0,1)
クラス、疑似クラス、属性: 1 – (0,0, 1, 0)
ID: 1 – (0,1,0,0)
インラインスタイル: 1 – (1,0,0,0)
ここでの属性は次を参照します:

効果は次のとおりです:

優先度は上から順に高くなります。計算方法も同様です。

p:1要素 – (0,0,0,1)
p:1要素 – (0) ,0,0 ,1)
#idSelector: 1 ID – (0,1,0,0)
p#idSelector: 1 要素、1 ID – (0,1,0,1)
p#idSelector p: 2要素、1 ID – (0,1,0,2)
p#idSelector p.classSelector: 2 要素、1 クラス、1 ID – (0,1,1,2)
それでは、上の例を見てみましょう:

p p.classSelector {color: blue} - (0,0,0,1) + (0,0,0,1) + (0,0,1,0) = (0,0,1,2)   
#idselector p {color: red} - (0,1,0,0) + (0,0,0,1) = (0,1,0,1)

優先度は (0,1,0,1) > (0,0,1,2) なので、最後に表示される色は赤であることがわかります。

継承
継承とは、子要素が親要素のスタイルを継承するという比較的わかりやすい概念です。例:

<p style="color:red">   
  <p>my color</p>   
</p>

上記の例のスパンは、親要素 p のスタイルを継承します。ただし、margin プロパティや padding プロパティなど、すべてのプロパティがデフォルトで継承を使用するわけではありません。例:

<p style="margin:10px;padding:10px">   
  <p>my color</p>   
</p>

この時点では、次のようにしない限り、要素 p は親要素 p のマージンとパディングのスタイルを継承しません:

<p style="margin:10px;padding:10px">   
  <p style="margin:inherit;padding:inherit">my color</p>   
</p>

概要
1。スタイルに作用する要素。 (継承によるスタイルを無視しないでください)
2. スタイルの効果距離を計算します。距離が近いほど優先度が高くなります。
3. 特別な計算方法を使用して、同じ距離内のスタイルを決定します。
4. 計算結果が同じ場合、後で宣言されたスタイルが以前に宣言されたスタイルをオーバーライドします。
5. ! important がスタイルに設定されている場合、そのスタイルは優先順位に関係なく優先されます。 (絶対に必要な場合を除き、このメソッドの使用は強くお勧めできません。これは間違いなく CSS の考え方に準拠していない使用法であるためです)

以上がCSS記述時の属性優先度問題の解決策の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。