Question

只是想知道是否有更好的方法来编写这个CSS？它重复了很多，这是一个简单的例子，它必须是这样吗？

<style type="text/css">
    div#leftBlock
    {
        position:absolute;      
        z-index: 1;
    }
    div#rightBlock
    {
        position:absolute;
        z-index: 1;
    }
    div#centerBlock
    {
        position:absolute;
        z-index: 2;
    }
    div#animateblock
    {
        position:absolute;
        z-index: 3;
    }
</style>

...

<div id="leftBlock" onclick="leftClick()"></div>
<div id="rightBlock" onclick="rightClick()"></div>
<div id="centerBlock"  onclick="centerClick()"></div>
<div id="animateBlock"></div>

Answer 1

这可能是：

#leftBlock, #rightBlock
{
    position:absolute;      
    z-index: 1;
}
#centerBlock
{
    position:absolute;
    z-index: 2;
}
#animateblock
{
    position:absolute;
    z-index: 3;
}

编辑添加了这个：最简约的方法是像这样编码html（删除ID）：

<div class="layout" onclick="leftClick()"></div>
<div class="layout" onclick="rightClick()"></div>
<div class="layout centerBlock" onclick="centerClick()"></div>
<div class="layout animated" ></div>

和css一样：

.layout {position: absolute; z-index: 1;}
.centerBlock {z-index: 2;}
.animated {z-index: 3;}

但这取决于您的需求，因为您可能需要其他东西的ID。

Answer 2

使用CSS类。例如：

.pa { position:absolute; }

div#leftBlock
{   
    z-index: 1;
}
div#rightBlock
{
    z-index: 1;
}
div#centerBlock
{
    z-index: 2;
}
div#animateblock
{
    z-index: 3;
}

然后你的html将是

<div id="leftBlock" class="pa" onclick="leftClick()"></div>
<div id="rightBlock" class="pa" onclick="rightClick()"></div>
<div id="centerBlock"  class="pa" onclick="centerClick()"></div>
<div id="animateBlock"class="pa" ></div>

Answer 3

上面的大多数方法都很棒（除了应用与样式相关的类名称的方法） - 如果你想缩短你的HTML（而不是同时为每个{{1应用一个ID和一个类）你也可以这样做：

<div/>

<div class="something"> </div>
<div class="something"> </div>
<div class="something somename"> </div>
<div class="something somethingrelevant"> </div>

（我添加的类名很奇怪，因为我不知道这些.something{ position:absolute; z-index:1; } .somename{ z-index:2; } .somethingrelevant{ z-index:3; }包含哪些内容 - 建议您始终使用与内容相关的类名，而不是样式）

Answer 4

    div 
    { 
        position:absolute;       
    } 
div#leftBlock, div#rightBlock 
    { 
        z-index: 1; 
    } 
 div#centerBlock   
    {   
         z-index: 2;   
    }   
 div#animateblock 
    { 
        z-index: 3; 
    }

编辑：只使用id的

#leftBlock, #rightBlock, #centerBlock, #animateblock  
{
  position:absolute;
}
#leftBlock, #rightBlock  
{  
   z-index: 1;  
}  
#centerBlock    
{    
   z-index: 2;    
}    
#animateblock  
{  
   z-index: 3;  
}

Answer 5

使用通用块类来应用定位，组合左右块声明，每次在每个元素上都有唯一ID时，无需说“div”。（实际上它不仅不需要它，而且会使你的CSS变慢。）

CSS：

.block { position:absolute; }
#leftBlock, #rightBlock { z-index: 1; }
#centerBlock { z-index: 2; }
#animateblock { z-index: 3; }

和HTML：

<div id="leftBlock" class="block" onclick="leftClick()"></div>
<div id="rightBlock" class="block" onclick="rightClick()"></div>
<div id="centerBlock"  class="block" onclick="centerClick()"></div>
<div id="animateBlock"class="block"></div>

编写这个CSS的更好方法是没有那么多的代码重复？

5 个答案: