Таргетинг на определенные элементы li

Question

В моем коде у меня есть элементы списка, подобные этому;

<div id="content"> 
<ul class="kwicks"> 
<li id="home"><span class="header"></span> 

Внутри CSS у меня есть стиль, подобный этому;

.kwicks li{ 
    display: block; 
    overflow: hidden; 
    padding: 0; 
    cursor: auto; 
    } 

Тем не менее, я хочу иметь другое фоновое изображение для каждого элемента списка, и у меня возникают проблемы с таргетингом на каждого из них. Этот фрагмент кода не работает.

.kwicks li #home{ 
    background: url(../images/slider_bg2.png) no-repeat left 
    } 

Куда я иду не так?

Answer 1

Удалить пространство li #home .WRITE так:

.kwicks li#home{ 
    background: url(../images/slider_bg2.png) no-repeat left 
    } 

Answer 2

Селектор

.kwicks li #home {} 

предполагает следующую разметке структуру:

<ul class="kwicks"> 
    <li> 
     <span id="home" class="header"></span> 
    </li> 
</ul> 

То, что вы, вероятно, хотите, это: (без пробела между li и #home)

.kwicks li#home {} 

или даже лучше (с точки зрения производительности):

#home {} 

Идентификатор является уникальным, так что вам не нужно указать классы или элементы с ним.