使用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将特定样式应用于列表项目

回答

相关问题