使用CSS將特定樣式應用於列表項目

我有一個簡單的列表，我設法排列併爲所有項目設置背景圖像。不過，我希望有一些列表項（列表項3）具有不同的背景圖像。有沒有辦法做到這一點，而不使用！重要？我的代碼是在下面。使用CSS將特定樣式應用於列表項目

的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>

感謝

來源

2012-06-25 Sumaru

'。我的列表li.different-BG {...}'就足夠了。 –

你只需要增加你的選擇的特殊性：

.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

來源

2012-06-25 16:26:49 Dancrumb

+1爲真正有用的鏈接。 –

看我的例子：jsfiddle

一切正常。嘗試製作更常見的風格，並將其作爲補充更改編寫。添加到您的CSS：

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

如果你有興趣，更多的細節可以在這裏找到：get specific css styles

來源

2012-06-25 16:29:41 Xella

使用CSS將特定樣式應用於列表項目

回答

相關問題