1 
#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;

我在一个页面上有很多（大约 100 个）#world(number) div。唯一改变的是值top和left背景 jpg 源。其他一切都是一样的，所以很明显它是大量的代码。有什么方法可以避免复制所有 div 之间保持不变的内容，而只更改每个 div 的绝对位置和背景源？

谢谢

4

6 回答 6

3

还要给 div 一个类，例如：class="worlds".

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

.world {  generic styling }

#wordl1 { custom styling }
于 2011-07-22T08:15:41.587 回答
1

将共享类添加到所有#worldN divs 是否可以接受？：

.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 */ }

在您的 HTML 中：

<div class="world" id="world1"></div>
<div class="world" id="world2"></div>
于 2011-07-22T08:16:46.640 回答
1

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

<div class="myClass" id="div1" />
<div class="myClass" id="div2" />
<div class="myClass" id="div3" />
<div class="myClass" id="div4" />

CSS：

.myClass
{
    ///all your repeating CSS
}
#div1{}
#div2{}
#div3{}
#div4{}
于 2011-07-22T08:17:00.527 回答
0

您可以将许多元素的相同规则与其类分组：http ://www.w3.org/TR/html4/struct/global.html#h-7.5.2

ID 将用于应用 UNIQUE 样式。

于 2011-07-22T08:16:33.547 回答
0

是的，只需将所有常见的内容放入一个div css可选class的 div 必须包含的 a 中，然后只需将专家 css 添加到每个 world div。请注意，您也可以class="class1 class2 class3"使用多个css class.

于 2011-07-22T08:17:36.300 回答
0

在http://sass-lang.com/上抢劫

于 2011-07-22T08:20:57.063 回答