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

【问题标题】：Avoiding copying CSS styles that stay the same for different divs避免复制对不同 div 保持相同的 CSS 样式
【发布时间】：2011-07-22 08:13:29
【问题描述】：

#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 的绝对位置和背景源？

谢谢

【问题讨论】：

是的，你可以。这实际上是一个 Javascript 解决方案，而不是 CSS。方法是将其设置为一个类。删除 CSS 中的 top 和 left 属性并使用简单的 Javascript 处理它，该 Javascript 在循环中获取元素 ID（相应地增加 top 和 left 值），然后更新您的样式。注意 CSS 和 Javascript 必须放在 HTML 代码下方。

标签： css html copying

【解决方案1】：

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

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

.world {  generic styling }

#wordl1 { custom styling }

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案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{}

【讨论】：

【解决方案4】：

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

ID 将用于应用 UNIQUE 样式。

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

在http://sass-lang.com/抢夺战利品

【讨论】：