html - 编写此 CSS 的更好方法，因此没有太多重复的代码？

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 来做其他事情。