CSSクラスの優先度

Question

今日、問題が発生した後にCSSクラスの優先度について質問があります。状況は次のようになります。

私はそれに関連するクラスを持つ順序のないリストを持っています。 LIタグにもいくつかのスタイルが定義されています。クリック後（"selected"クラスを介して）LIのスタイリングを変更したいが、追加されたクラスのスタイルは適用されない。これは正常な動作か、このコードは動作するのでしょうか？

CSS：

.dynamicList 
{ 
    list-style: none; 
} 

.dynamicList li 
{ 
    display: block; 
    width: 400px; 
    height: 55px; 
    padding: 10px 10px 10px 10px; 
    border: 1px solid #000; 
    background-color: #ff0000; 
} 

.selectedItem 
{ 
    background-color: #0000ff; 
} 

はHTML：

<ul class="dynamicList"> 
    <li>First Item</li> 
    <li class="selectedItem">Second (Selected) Item</li> 
</ul> 

"selected"リスト項目の背景色が変更されていません。私はLI要素にスタイルを適用するが、別のクラスを作成し、それを読み込むように、すべてのリスト項目にそれを適用しない場合、これは、短い答えはあなたの.selectedItemこと..ですまた

<li class="listitem selectedItem">xxxx</li> 

Answer 1

これはCSS specificityのように聞こえます。

.dynamicList li.selectedItem { 
    background-color: #0000ff; 
} 

Answer 2

ケースです前のスタイルがより特定的であり、したがってより高い優先度を有するため、スタイルが適用されない。ここでdecent rundownです：

それでは、CSSのため 内部優先順位（3 優先順位が最も高い）の一般的なリストを作成してみましょう：

element 
.class 
#id 

これはデフォルトの優先順位です。これに加えて、 には、特異度が もカウントされ、f.ex ul liは liを上書きします。

LI   {...} /* a=0 b=0 c=1 -> specificity = 1 */ 
UL LI   {...} /* a=0 b=0 c=2 -> specificity = 2 */ 
UL OL LI  {...} /* a=0 b=0 c=3 -> specificity = 3 */ 
LI.red  {...} /* a=0 b=1 c=1 -> specificity = 11 */ 
UL OL LI.red {...} /* a=0 b=1 c=3 -> specificity = 13 */ 
#list   {...} /* a=1 b=0 c=0 -> specificity = 100 */ 

そして、ここではW3C specificationです：W3Cは、あなたが内部 重量を計算する必要がありますどのように 上でまともな表を作っています。

Answer 3

変更selectedItemルールを：：

.dynamicList li.selectedItem 
{ 
    background-color: #0000ff; 
} 

Answer 4

cletus'ポストで言及されなかった少量の添加にご.selectedItemルールセットを変更してみてください。
W3Cリンクによれば、最も優先順位は、html要素/タグで使用されるstyle属性です。

など。あなたは

<a id= bar style="color: red">foo</a> 

と

<style> 
#bar { 
    color: blue; 
} 
</style> 

を持っている場合は、インラインHTMLスタイルが#よりも高い優先順位が最も高いが、持っているので、色がredになります。