競合する属性間の優先度

Question

競合する属性が直接またはcssによって指定された場合、どのように優先順位が決定されますか？

この例では、CSSによって指定されたdisplay : noneがid=1に直接指定されたdisplay : inline-blockを上書きしているように見えます。私は2つの競合するクラスの仕様を持って次の例では

<style> 
.invisible{ 
    display : none 
}​​ 
</style> 
<div id=1 class="invisible" style="display:inline-block">Hello World</div> 

、

<style> 
.invisible{ 
    display : none 
}​​ 
.visible{ 
    display : inline-block 
}​​ 
</style> 
<div id=1 class="visible invisible">Hello World</div> 

.visibleクラスを介して指定されたdisplay : inline-blockは.invisibleクラスを介して指定されたdisplay : noneをオーバーライドしているようです。

このような場合の優先順位を決定するルールは何ですか？ CSSルールの

Answer 1

それは=「インライン・ブロック」を表示していない...。一例では、あなたのコードが間違っている、あなたの質問に答えるために...それは

<div id=1 class="invisible" style="display: inline-block;">Hello World</div> 

インラインスタイルは、常にスタイルシートよりも優先されますです。間違って書かれたため、スタイルシートが引き継がれました。

例2では、​​display：noneの後に宣言されているため、表示ブロックが勝ちます。ブラウザは上から下にコードを読み込むため、プロパティの最後に宣言した値が勝ちます（重要なタグを使用しない限り）。そして、インラインスタイルは常に勝ちます。より多くの優先ルールがありますが、それはあなたの例にとって必要なものです。

Answer 2

OK、specificityの概念が決定するルール（s）は同じCSSプロパティを指定するルールが同じを持っている場合（同じ名前のプロパティを指定します。ケースのために重要である）優先されますスタイルシートに指定された最新のルールは、計算されたスタイルにプロパティ値を提供します。