Question

#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（数字）div。唯一改变的是top和left值以及背景jpg源。其他一切都是一样的，所以很明显它是一个庞大的代码。有什么方法可以避免复制所有div之间保持相同的内容，只改变每个div的绝对位置和背景源？

由于

Answer 1

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

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

.world {  generic styling }

#wordl1 { custom styling }

Answer 2

为所有#worldN div添加共享类是否可以接受？：

.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>

Answer 3

为所有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{}

Answer 4

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

ID将用于应用UNIQUE样式。

Answer 5

是的，只需将常见的所有内容放入div css，可选择为其提供必须包含的class，然后将专家css添加到每个世界div 。请注意，您也可以class="class1 class2 class3"使用多个css class。

Answer 6

在http://sass-lang.com/

处获取战利品

避免复制不同div的CSS样式

6 个答案: