Question

我有以下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;
}

但是这会改变书架div中每个图像的属性，而不是特定的图像。

Answer 1

最好的方法是在每张图片上使用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 { }

Answer 2

<div id="bookshelf">
    <img class="image01" src="images/bookshelf.png" id="background_img" />
    <img class="image02" src="images/book-cover-people.png" />
    <img class="image03" src="images/sports_cover.png" />
    <img class="image04" src="images/travels_book_cover.png" />
    <img class="image05" src="images/photoalbum_cover.png" />
</div>

<style type="text/css">
#bookshelf img.image01{}
#bookshelf img.image02{}
#bookshelf img.image03{}
#bookshelf img.image04{}
#bookshelf img.image05{}
</style>

This way also you can do.

在css文件中基于id设置图像属性

2 个答案: