9

私はこのトピックに関するまともな記事を読んでいました: http://www.plus2net.com/html_tutorial/css-types.php 検索用語 css スタイル シートの優先順位について、Google によって最高ランクにランク付けされました。しかし、このサイトはあなたに誤解を与えており、不完全だと思います! 誰かが私の疑いを確認できますか?

1) ユーザー定義スタイルは 2 番目に低い優先度です。他のスタイルをオーバーライドするには、!important を使用して最高に移動する必要があります。2) <link> と @import および <link> 内の @import の相対的な優先度について言及していません。

より正確な順序付けは次のようになります (1 勝 2 など) :

  1. ユーザー定義 (ブラウザ設定 !重要 - [Google Chrome ではありません!])
  2. インライン スタイル シート (HTML ノードのスタイル属性)
  3. 内部スタイル シート (<head> 内の <style>)
  4. 外部スタイルシート (@import)
  5. 外部スタイル シート (<リンク>)
  6. 外部スタイル シート (<link> 内の @import)
  7. ユーザー定義 - (ブラウザ設定 - [Google Chrome ではありません!])
  8. ブラウザのデフォルト - (ブラウザに同梱)

Michael Bowers Pro CSS & HTML Design Patternsも、これに関する優れた情報源です。しかし、インラインについては言及されていません。

他に欠けているものはありますか？

PS: 私は !important が 2-8 から欠落していると推測していました。そのため、User defined が 2 回表示されます。1 回は重要で、2 回目は重要ではありません。したがって、ユーザー定義は本質的に2番目に低いです。!important は当然どのレベルでも適用できます。

4

1 に答える 1

7

最も重要で最も重要でないという観点から考えるのではなく、カスケードの順序で考えてください。すべてのスタイルが適用されますが、最後に適用されたスタイルが表示されます。スタイルは次の順序で適用されます。

  1. ブラウザのデフォルト
  2. 外部スタイルシート (linkまたは@import)
  3. 内部スタイルシート
  4. インライン スタイル

最初の 3 つのいずれかの中で、スタイルは最も具体的でないものから最も具体的なものへと適用されます (最も具体的なものを決定できない場合は、上から下へ)。タグで選択されたスタイルは、クラスで選択されたスタイルの前に適用されるため、どのスタイルを適用するかについて意見が分かれた場合は、クラスで選択されたスタイルが優先されます。最初に適用するかどうか、または最初に適用する必要があるかどうlinkかについてのルールはありません。@import

!importantより具体的なスタイルの後に特定性の低いスタイルを適用し、内部スタイルまたはインライン スタイルの後に外部スタイル シート スタイルを適用します。!importantただし、かなり紛らわしい結果が生じる可能性があるため、可能な限り使用しないことをお勧めします。

于 2011-02-18T10:12:09.757 に答える