Question

在我的页面中，我有很多表格单元格。
在每个单元格内部，我有一个盒子（我使用扰流器代码来显示或隐藏里面的内容）。
盒子由CSS描述。
盒子外观相同，但我想自定义每个属性作为更改颜色或背景图像
我将CSS粘贴几次相当于盒子的数量。
我在每个盒子代码之前粘贴css样式。
我尝试更改每个框的背景图像（默认颜色为白色）但是当我尝试更改其中一个背景时，我获得所有框的相同背景。
但这不是我想要的。

我在文件夹中有几张图片，但好像我不能为不同的盒子提供不同的背景图片。
这是我使用的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>

第一个方框的背景图片为cieloprato.jpg。但我想为box2插入不同的图像，如bastman.png，用于box3 spiderman.gif。
如何为每个盒子更改背景图像或CSS样式？
原谅我的无知

Answer 1

我认为有三种方式：

的首先 的。您可以使用nth-* css属性，但它在旧浏览器中不起作用。

.myautoscroll:nth-of-type(2) { background: #3e3; }

此代码使用此类更改3 div中的背景颜色。

的其次 的。您可以添加每个div元素唯一identifier或class，并通过css中的相应选择器获取。

<div class="myautoscroll" id="mas1">...</div> <div class="myautoscroll" id="mas2">...</div> #mas1 { ... } #mas2 { ... }

的第三 的。您可以添加到每个div元素style属性，您可以在其中指明所需的背景。

<div class="myautoscroll" style="background: #0f3">...</div> <div class="myautoscroll" style="background: #1f3">...</div>

的第四 的。你可以通过JavaScript中的循环来做到这一点（这只是一个例子）：

var elements = document.getElementByClassName('myautoscroll'); for (var i in elements) { var el = elements[i]; el.style.background = '#' + (i % 10) + 'f3'; }

Answer 2

为什么不给td上课？

.box1{background:url(cieloprato.jpg};
.box2{background:url(batman.png)};

并将其放在像这样的HTML中

<td class = "box1"></td>
<td class = "box2"></td>

每个盒子都有不同的CSS？

2 个答案: