避免複製對不同div的CSS樣式保持不變

#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的絕對位置和背景源？避免複製對不同div的CSS樣式保持不變

感謝

來源

2011-07-22 user852974

是的，你可以。這實際上是一個JavaScript解決方案，而不是CSS。方法是將其設置爲一個類。刪除CSS中的頂部和左側屬性，並使用一個簡單的Javascript來處理它，並在循環中獲取元素ID（相應地增加頂部和左側值），然後更新樣式。謹防CSS和Javascript必須放置在HTML代碼的下方。 – KMC

也給股利一類，例如：class="worlds"。

，並把所有的通用造型在該類

.world { generic styling } 

#wordl1 { custom styling }

來源

2011-07-22 08:15:41 PeeHaa

您可以將許多元素與他們的類組相同的規則：http://www.w3.org/TR/html4/struct/global.html#h-7.5.2

ID將被用來申請各有千秋。

來源

2011-07-22 08:16:33 MatTheCat

難道是可以接受的共享類添加到所有#worldNdiv S的？：

.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-22 08:16:46 GarlicFries

共同使用的風格類的所有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-22 08:17:00

是的，只是把一切的共同入divcss可選給它一個class的DIV必須包括然後只是專家的CSS添加到每個世界div。請注意，您也可以使用class="class1 class2 class3"以使用多個css class。

來源

2011-07-22 08:17:36

拿起物品在http://sass-lang.com/

來源

2011-07-22 08:20:57 FreeCandies

避免複製對不同div的CSS樣式保持不變

回答

相關問題