每个盒子的背景不同？

Question

我尝试更改<td>标记内每个框的图像背景，但是当我尝试更改其中一个背景时，我获得了所有框的相同背景。 但这不是我想要的。
这是页面的一个方面：

我用于框的CSS是：

<style type='text/css'>
div.myautoscroll {
    height: 80ex;
    width: auto;
    background: white;
    background-image: url(cieloprato.jpg);
    overflow: hidden;
    border: 1px solid #444;
    margin: 1em;
}
div.myautoscroll:hover {
    overflow: auto;
}
div.myautoscroll p {
    padding-right: 16px;
}
div.myautoscroll:hover p {
    padding-right: 0px;
}
</style>

我尝试添加到每个<div>元素的唯一标识符或类，并通过 CSS 中的相应选择器获取它但是出了点问题。

我想要更改第二个背景，但如果我尝试更改它，css也会更改我的第一个背景。您可以看到两个框的背景相同cieloprato.jpg。我想插入第二个或第三个框的另一个背景。
如何修改 CSS代码？
This is my HTML page

Answer 1

是的，为所有div.myautoscroll设置背景图像（并且您看到相同的图像）。您可以（例如）在每个div.myautoscroll的生成表中添加'＃myautoscroll_1'，'＃myautoscroll_2'...'#myautoscroll_n'。并添加css代码：

#myautoscroll_1 {
   background-image: url(image_1.jpg);
}

#myautoscroll_2 {
   background-image: url(image_2.jpg);
}

#myautoscroll_n {
   background-image: url(image_n.jpg);
}

Answer 2

或者，CSS允许您通过:nth-child()伪类通过其（基于一个）索引选择元素，因此您可以执行以下操作：

div.myautoscroll{ /*Generic formatting for all your boxes*/
    height: 80ex;
    width: auto;
    background: white;
    overflow: hidden;
    border: 1px solid #444;
    margin: 1em;
}
#example tr:nth-child(1) div.myautoscroll{
    /* Selects all boxes in the first row of your table,
       you can use :first-child here too */
    background-image: url(cieloprato.jpg); /* This, or any other image */ }
#example tr:nth-child(2) div.myautoscroll{
    /* Selects all boxes in the second row of your table. */
    background-image: url(some_other_image.jpg); /* The image for the second box */ }
#example tr:nth-child(3) div.myautoscroll{
    /* Same as above, just for the third row */
    background-image: url(yet_another_image.jpg); /* Third image */ }
div.myautoscroll:hover {
    overflow: auto;
}
div.myautoscroll p {
    padding-right: 16px;
}
div.myautoscroll:hover p {
    padding-right: 0px;
}