css - 每个盒子都有不同的背景？

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代码？
这是我的 HTML 页面

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;
}