避免复制不同div保持相同的CSS样式

我在一页上有很多（大约100个）这样的世界（数字）div。唯一改变的是

top

和

left

值以及背景jpg源代码。其他一切都是一样的，显然这是一个巨大的代码量。是否有某种方法可以避免复制所有div之间保持不变的内容，而只更改每个div的绝对位置和背景源

---

谢谢

也给div一个类，例如：

class=“worlds”

并将所有通用样式都放在该类中

#world1 {
                            background: url(/images/home/1.jpg) 0 0 no-repeat;
                            float: left;
                            width: 2%;
                            height: 4%;
                            position: absolute;
                            top: 0%;
                            left: 0%;
                            z-index: -1;
                            margin-top: -20px;
                            margin-left: -20px;
                        }

                        #world1:hover {
                            background-position: 0 -40px;
                            cursor: pointer;

---

也给div一个类，例如：

class=“worlds”

并将所有通用样式都放在该类中

#world1 {
                            background: url(/images/home/1.jpg) 0 0 no-repeat;
                            float: left;
                            width: 2%;
                            height: 4%;
                            position: absolute;
                            top: 0%;
                            left: 0%;
                            z-index: -1;
                            margin-top: -20px;
                            margin-left: -20px;
                        }

                        #world1:hover {
                            background-position: 0 -40px;
                            cursor: pointer;

---

可以将许多元素的相同规则与其类分组：

---

ID将用于应用独特的样式。

您可以将许多元素的相同规则与其类分组：

---

ID将用于应用独特的样式。

是否可以将共享类添加到所有

#worldN

div

s？：

.world {  generic styling }

#wordl1 { custom styling }

在您的HTML中：

.world { /* Styles general to class="world" */ }
#world1 { /* Styles specific to id="world1" */ }
#world1:hover { /* Styles specific to id="world1" hover state */ }
#world2 { /* Styles specific to id="world2" */ }
#world2:hover { /* Styles specific to id="world2" hover state */ }

是否可以将共享类添加到所有
#worldN
div
s中：

.world {  generic styling }

#wordl1 { custom styling }

在您的HTML中：

.world { /* Styles general to class="world" */ }
#world1 { /* Styles specific to id="world1" */ }
#world1:hover { /* Styles specific to id="world1" hover state */ }
#world2 { /* Styles specific to id="world2" */ }
#world2:hover { /* Styles specific to id="world2" hover state */ }

将类用于所有div的通用样式，将id用于唯一样式：
HTML:

将类用于所有div的通用样式，将id用于唯一样式：
HTML:

是的，只需将所有常见的内容放入
div
css
中，并可选地给它一个div必须包含的
类，然后只需将专业css添加到每个世界
div
。注意：你也可以做
class=“class1 class2 class3”
来使用多个
css类
是的，只要把所有常见的东西都放到一个
div
css
中，可以选择给它一个div必须包含的
类
，然后把专业的css添加到每个世界
div
。注意：您也可以使用多个css类来使用
class=“class1 class2 class3”
在
获取战利品在
获取战利品是的，您可以。这实际上是一个Javascript解决方案，而不是CSS。方法是将其设置为类。删除CSS中的top和left属性，并使用简单的Javascript处理它，该Javascript在循环中获取元素ID（相应地增加top和left值），然后更新样式。注意CSS和Javascript必须放在HTML代码下面。是的，你可以。这实际上是一个Javascript解决方案，而不是CSS。方法是将其设置为类。删除CSS中的top和left属性，并使用简单的Javascript处理它，该Javascript在循环中获取元素ID（相应地增加top和left值），然后更新样式。注意CSS和Javascript必须放在HTML代码下面。