Question

我有以下情况：

<ul id = "content">

<li id = "ContentList">
<img src = "test.png" class = "icon" />
</ li
<li id = "ContentList">
<img src = "test.png" class = "icon" />
</ li

</ ul>

第一个和第二个（LI）的图像相等，但我需要插入两个不同的图像。

我可以使用css更改所有这些：

.icon {
display: block;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: url (newbanner.png) no-repeat;
width: 180px;
height: 236px;
padding-left: 180px;
}

如何将第一个和第二个（LI）的图像更改为：

.icon {
display: block;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: url (newbanner1.png) no-repeat;
width: 180px;
height: 236px;
padding-left: 180px;
}

.icon {
display: block;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: url (newbanner2.png) no-repeat;
width: 180px;
height: 236px;
padding-left: 180px;
}

由于

Answer 1

我不知道你将如何使用img中的背景图片，但据我所知，它不值得这样做，而是你可以为<li>分配背景图像，你可以在里面使用img标记。无论你向我们展示什么代码，我都试着向你展示你可以尝试的方式之一。

您可以尝试这样做： Demo

.i1, .i2 {
    display: block;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 180px;
    height: 236px;
    padding-left: 180px;
}
.i1 {
    background: #ccc url(newbanner1.png) no-repeat;
}
.i2 {
    background: red url(newbanner2.png) no-repeat;
}

HTML：

<ul id="content">
    <li>
        <img src="test.png" class="i1" />
    </li>
    <li>
        <img src="test.png" class="i1" />
    </li>
    <li>
        <img src="test.png" class="i2" />
    </li>
    <li>
        <img src="test.png" class="i2" />
    </li>
</ul>

更新：请尝试以下操作： Demo

.i1, .i2 {
    display:block;
    width: 180px;
    height: 236px;
    margin:5px auto;
}
.i1 img, .i2 img {
    width: 100%;
}

HTML：

<ul id="content">
    <li class="i1">
        <img src="http://www.stockazoo.com/uploads/3/5/4/5/3545172/9835079_orig.jpg" />
    </li>
    <li class="i1">
        <img src="http://www.stockazoo.com/uploads/3/5/4/5/3545172/9835079_orig.jpg" />
    </li>
    <li class="i2">
        <img src="http://www.stockazoo.com/uploads/3/5/4/5/3545172/9835079_orig.jpg" />
    </li>
    <li class="i2">
        <img src="http://www.stockazoo.com/uploads/3/5/4/5/3545172/9835079_orig.jpg" />
    </li>
</ul>

Answer 2

您可以使用:nth-child选择器，根据订单选择一个或多个元素。

HTML：

<ul id="content">

<li>
<img src = "test.png" class = "icon" />
</ li
<li>
<img src = "test.png" class = "icon" />
</ li

</ul>

CSS：

li:nth-child(1) .icon 
{
        display: block;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        background: url (newbanner1.png) no-repeat;
        width: 180px;
        height: 236px;
        padding-left: 180px;
}

li:nth-child(2) .icon {
        display: block;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        background: url (newbanner2.png) no-repeat;
        width: 180px;
        height: 236px;
        padding-left: 180px;
 }

在两个不同的区域替换相同的类 - CSS

2 个答案: