CSS多个class样式使用实践－多用组合，少用继承

先用继承实现一个效果，代码如下：
<style type="text/css">

        .numberList1, .numberList2,  .numberList3, .numberList4{  border:1px solid #ccc;padding:10px; }

        .numberList1 li, .numberList2 li,.numberList3 li,.numberList4 li{ height:20px;line-height:20px; font-size:12px;  }

.numberList2 li, .numberList4 li{ font-size:16px;}

.numberList3 li, .numberList4 li{ color:red}
</style>

     <ul class="numberList1">

   <li>aaaaaaaaaaaaaa</li>

          <li>bbbbbbbbbbbbbb</li>

   </ul>

    <ul class="numberList2">

   <li>aaaaaaaaaaaaaa</li>

        <li>bbbbbbbbbbbbbb</li>

   </ul>

    <ul class="numberList3">

   <li>aaaaaaaaaaaaaa</li>

        <li>bbbbbbbbbbbbbb</li>

   </ul>

    <ul class="numberList4">

   <li>aaaaaaaaaaaaaa</li>

        <li>bbbbbbbbbbbbbb</li>

   </ul> 

分析：  在上面的三个ul中， 主要是文字的大写与颜色部分将来会是变化的，    而对每一行的高度，边框，行间距等都是一样的。 

这样我们可以采用面向对象编程中的思想－组合，   将变化的样式单独地写成类样式(f12, f16, red)， 而将相同的稳定的部分写成numberList类， 

在要用的时候，组合起来，以达到最好的灵活性。 （在这里，主要是利用了html标签的class属性可以挂多个这个特点，而id只能挂一个). 

      使用组合，代码实现如下：
<style type="text/css">
     .f12{font-size:12px;}

    .f16{font-size:16px;}

    .red{color:red;}

    .numberList{border:1px solid #ccc;padding:10px;}

    .numberList li{height:20px;line-height:20px;} 
</style>
  <ul class="numberList f12">

    <li>aaaaaaaaaaaaaa</li>

        <li>bbbbbbbbbbbbbb</li>

   </ul>

    <ul class="numberList f16">

    <li>aaaaaaaaaaaaaa</li>

        <li>bbbbbbbbbbbbbb</li>

   </ul>

    <ul class="numberList f12 red">

    <li>aaaaaaaaaaaaaa</li>

        <li>bbbbbbbbbbbbbb</li>

   </ul>

    <ul class="numberList f16 red">

    <li>aaaaaaaaaaaaaa</li>

        <li>bbbbbbbbbbbbbb</li>

   </ul>