Priorytety klasy CSS

Question

Mam pytanie dotyczące priorytetu klas CSS po napotkaniu problemu. Sytuacja wygląda następująco:

Mam nieuporządkowaną listę, która ma przypisaną klasę. Znaczniki LI również mają określone style. Chcę zmienić styl LI s po kliknięciu (za pomocą dodanej klasy "selected"), ale style dodanej klasy nigdy nie są stosowane. Czy to normalne zachowanie czy powinien działać ten kod?

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> 

Kolor tła elementu "selected" liście nie ulega zmianie. Jest to również w przypadku, gdyby nie zastosować styl do elementu LI, ale utworzyć inną klasę i że stosuje się do wszystkich elementów listy, więc czyta ..

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

Answer 1

To brzmi jak problem z CSS specificity. Spróbuj zmienić .selectedItem zestaw reguł do:

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

Answer 2

Krótka odpowiedź jest taka, że ​​twój .selectedItem styl nie jest stosowany, ponieważ poprzedni styl jest bardziej szczegółowy i ma wyższy priorytet. Oto decent rundown:

Teraz zróbmy ogólną listę wewnętrznych priorytetów dla CSS (3 ma najwyższy priorytet):

element 
.class 
#id 

To jest domyślna kolejność priorytetów. W dodatku oprócz specyficzności będzie również , f.ex ul li zastąpi li. W3C dokonał godnej tabeli nad jak należy obliczyć wewnętrzną ciężar:

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 */ 

A oto W3C specification.

Answer 3

Zmiana selectedItem zasada:

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

Answer 4

niewielkim dodatkiem, który nie został wymieniony pocztą Cletus.
Zgodnie z linkiem W3C najwyższym priorytetem jest atrybut style używany w elemencie/tagu html.

E.g. jeśli masz

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

i

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

kolory będą red ponieważ inline styl html ma najwyższy priorytet wyższy niż #.