Question

想要在div中设置两个图像的样式并为它们提供不同的CSS样式。

<div id="l1">
 <h4>Thorlax Comfort Socks </h4>
 <img src="images/comfortSocks.png">
 <p> These socks offer you the best in comfort. 
 <h3> $9.99 </h3>
 <img src="images/CheckItOut.png">
</div>

我如何才能为这两个图像赋予不同的样式属性。以下是我通常会如何处理它。如何仅定位底部图像“images / CheckItOut.png”

l1 img { etc etc etc
}

非常感谢任何帮助。我有一种感觉这是一个简单的问题，但我之前没遇到过这个问题。

Answer 1

为每个图像分配一个类并为每个类设置样式。例如：

<img src="images/comfortSocks.png" class="socks">
<img src="images/CheckItOut.png" class="checkitout">

然后你的CSS

img.socks {
    ....
}
img.checkitout {
    ....
}

Answer 2

您可以为您的img提供不同的ID。

<div id="l1">
 <h4>Thorlax Comfort Socks </h4>
 <img id="img1" src="images/comfortSocks.png">
 <p> These socks offer you the best in comfort. 
 <h3> $9.99 </h3>
 <img id="img2" src="images/CheckItOut.png">
</div>

的CSS

#img1{


}

#img2{

}

Answer 3

向div添加类是最佳选择。但是，如果你不能。你可以使用“of-type”伪东西：

实施例

选择第一张图片

#l1 img:first-of-type {
    // code here
}

#l1 img:nth-of-type(1) {
    // code here
}

选择第二张和最后一张图像

#l1 img:last-of-type {
    // code here
}

#l1 img:nth-of-type(2) {
    // code here
}

Answer 4

另一种解决方案是使用css nth-child（）选择器。

http://www.w3schools.com/cssref/sel_nth-child.asp

如果您每次都将第一张和第二张图像设置为相同样式，则此功能非常有用。

在你的情况下，它将是：

 #l1 img:nth-child(2){
   css for first image
 }
 #li img:nth-child(5){
   css for second image
 }

在div中设置两个图像的方式不同

4 个答案: