Применить определенный стиль к элементу списка с помощью CSS

Question

У меня есть простой список, который мне удалось получить в строке и иметь фоновое изображение для всех элементов. Однако я хочу, чтобы некоторые элементы списка (элемент списка 3) имели другое фоновое изображение. Есть ли способ сделать это без использования! Важно? Мой код ниже.

CSS-

.my-list li { 
    list-style: none; 
    display: inline; 
    background-image: url(../images/butn-bg.png); 
} 
.different-bg { 
     background-image: url(../images/butn-bg-1.png); 
} 

HTML-

<div class="my-list"> 
    <ul> 
    <li>List item 1</li> 
    <li>List item 2</li> 
    <li class="different-bg">List item 3</li> 
    <li>List item 4</li> 
    </ul> 
</div> 

Благодаря

Answer 1

Вам просто нужно увеличить специфику Вашего выбора:

.my-list li { 
    list-style: none; 
    display: inline; 
    background-image: url(../images/butn-bg.png); 
} 
.my-list li.different-bg { 
     background-image: url(../images/butn-bg-1.png); 
} 

См Calculating a selector's specificity

Answer 2

Посмотрите мой пример: jsfiddle

Все работает правильно. Попробуйте сделать более распространенные стили и напишите их как дополнение. Добавьте это в CSS:

.my-list .different-bg { 
    background-image: url(http://placekitten.com/g/200/300); 
}​ 

Если вы заинтересованы, более подробную информацию можно найти здесь: get specific css styles