html - The big !important; troubles

Question

I still dont get it, which color will be paragraph "test1" and why?

<style>
  p {
    color: red; 
    font-style: italic;
  }
</style>

<div style="color: green;!important">
  <p style="color: blue;">test1</p>
  <p>test2</p>
</div>

Answer 1

段落「test1」はどの色で、その理由は何ですか?

青。あなたのタイプミスがあっても、それはまだ青です。スタイルは、color: green !important内のテキストにのみ適用されますdiv。したがって、 のインラインスタイルがcolor: blue;最も具体的です。

この fiddleの違いを参照してください。

CSS の特異性がどのように機能するかについて学ぶことをお勧めします。

Answer 2

重要度はカスケードしません。

親要素 ( <div>) に!importantプロパティがある場合でも (構文エラーのため、実際には存在しないことに注意してください)、子要素に適用されるプロパティによってオーバーライドされます。

!important同じ要素に適用される他のルールのみをオーバーライドできます。

したがって、<p>インライン スタイルをオーバーライドするものがないため、最初のスタイルは青になります。

Answer 3

青にするスタイル属性があるため、青になります。div は緑色ですが!important、セミコロンの後にフラグがあります。ただし、セミコロンの代わりにスペースがあったとしても、スタイル属性がそれをオーバーライドします。青になります。