Добавить различные изображения в элементы div с тем же классом

Question

Можно ли выбрать элементы div с тем же классом с помощью css и применить к ним эти атрибуты css.

Мой 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

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

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

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

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

Answer 2

Просто используйте п-й ребенок pseudoselector [parent element] .image:nth-child(n), и вы можете выбрать их по отдельности в зависимости от их позиции в массиве детей с таким именем класса (начиная с 1).

Как упоминалось в Alaa Mohammead, вы можете изменить стили inline, но затем требуется более поздняя декларация !important, если сайт реагирует, поэтому, как правило, это не очень хорошая практика, чтобы просто использовать таблицу стилей для применения стилей, которые вы используете хотеть.