如何修改样式

情况大概如下
2个div他们的样式差不多是一样的
但是这样写起来看上去太冗余了  （重复写了很多）
我希望的是前面有个公共的  后面在他们的样式里面只需要写不同的部分就可以了
(请不要用 div{}来当公共的 这样不需要这个样式的div就太难改了..........)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<style type="text/css">
.l1{
height:100px;
width:100px;
border:1px solid #0000FF;
background-color:#CC0000;
position:absolute;
border:1px solid #00FFFF;
left:100px;
top:100px;
}
.l2{
height:100px;
width:100px;
border:1px solid #0000FF;
background-color:#CC0000;
position:absolute;
border:1px solid #FFFF00;
left:300px;
top:3 00px;
}
</style>
</head>
<body>
<div class='l1'></div>
<div class='l2'></div>
</body></html>

解决方案 »

  1.   

    前面套个div可以吧
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title></title>
    <style type="text/css">
    .l div{
    height:100px;
    width:100px;
    background-color:#CC0000;
    position:absolute;
    }
    .l1{
    border:1px solid #00FFFF;
    left:100px;
    top:100px;
    }
    .l2{
    border:1px solid #FFFF00;
    left:300px;
    top:3 00px;
    }
    </style>
    </head>
    <body>
    <div class="l">
    <div class='l1'></div>
    <div class='l2'></div>
    </div>
    </body></html>
      

  2.   

    修改如下....<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title></title>
    <style type="text/css">
    .li0{
    height:100px;
    width:100px;
    border:1px solid #0000FF;
    background-color:#CC0000;
    position:absolute;
    }
    .l1{
    border:1px solid #00FFFF;
    left:100px;
    top:100px;
    }
    .l2{
    border:1px solid #FFFF00;
    left:300px;
    top:300px;
    }
    </style>
    </head>
    <body>
    <div class='li0 l1'></div>
    <div class='li0 l2'></div>
    </body>
    </html>
      

  3.   

    因为这两个div都有公共的属性，所有必须得定义吧，如果没有个外层的去包含这些属性，这两个DIV如何去继承那些公共的属性呢？
    或许没明白lz什么意思，除了上面两种写法，真想不出来还有什么可以替代-^-