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;

1 つのページにこれらの #world(number) div が多数 (約 100) あります。変更されるのは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 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>
于 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

http://sass-lang.com/で戦利品を手に入れよう

于 2011-07-22T08:20:57.063 に答える
0

はい、一般的なものをすべて に入れ、div css必要に応じclassて div に含める必要がある を指定してから、スペシャリストの css を各 world に追加するだけですdiv。class="class1 class2 class3"複数の を使用することもできることに注意してくださいcss class。

于 2011-07-22T08:17:36.300 に答える