Блог

У меня следующая структура html:

 <div id="bookshelf">
        <img src="images/bookshelf.png" id="background_img" />
        <img src="images/book-cover-people.png"/>
        <img src="images/sports_cover.png" />
        <img src="images/travels_book_cover.png" />
        <img src="images/photoalbum_cover.png"/>
    </div>
  

и я хочу установить свойства css по-разному для каждого изображения. как я могу указать в файле css, что для одного изображения мне нужны определенные свойства, а для другого изображения мне нужны другие.

в настоящее время то, что я делаю, это:

 #bookshelf img {
    width: 90%;
    height: 90%;
    background-size: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}
  

но это изменяет свойства каждого изображения внутри раздела bookshelf, а не конкретных изображений.

Лучшим способом было бы использовать id атрибут для каждого изображения, уникальный для каждого img элемента.

Возьмите:

 <div id="bookshelf">
    <img src="images/bookshelf.png" id="background_img" id="one" />
    <img src="images/book-cover-people.png" id="two"/>
    <img src="images/sports_cover.png" id="three" />
    <img src="images/travels_book_cover.png" id="four" />
    <img src="images/photoalbum_cover.png" id="five"/>
</div>
  

теперь вы можете использовать следующий селектор для установки свойств, общих для всех изображений:

 #bookshelf img {}
  

и следующие селекторы для стилей, применимых к отдельным изображениям:

 #one { }
#two { }
#three { }
#four { }
#five { }
  

 <div id="bookshelf">
    <img src="images/bookshelf.png" id="imageOne" />
    <img src="images/book-cover-people.png" id="imageTwo" />
    <img src="images/sports_cover.png" id="imageThree" />
    <img src="images/travels_book_cover.png" id="imageFour" />
    <img src="images/photoalbum_cover.png" id="imageFive" />
</div>

<style>
#bookshelf #imageOne{}
#bookshelf #imageTwo{}
#bookshelf #imageThree{}
#bookshelf #imageFour{}
#bookshelf #imageFive{}
</style>

You can do this way too.