将不同的图像添加到具有相同类的div元素

Question

是否可以使用css选择具有相同类的div元素，并将不同的css属性应用于这些div元素。

我的HTML：

<div class="image"><br/>a</div>

<div class="image"><br/>b</div>

<div class="image"><br/>c</div>

CSS：

div.image:before {
   content:url(http://placehold.it/350x150);
}

//want to show different image for the three divs in html

JSfiddle：http://jsfiddle.net/htfhjzbo/1/

Answer 1

您可以使用nth of type selector

＆＃13;

＆＃13;

.image:nth-of-type(2) {
    background: #ff0000;
}

＆＃13;

<div class="image"><br/>a</div>

<div class="image"><br/>b</div>

<div class="image"><br/>c</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

只需使用nth-child伪选择器[parent element] .image:nth-child(n)，您就可以根据它们在具有该类名的子组数组中的位置（从1开始）单独选择它们。

正如Alaa Mohammead所提到的，您可以内联更改样式，但如果网站具有响应性，则需要稍后进行!important声明，因此仅仅使用它通常不是一个好习惯一个样式表来应用你想要的样式。