先用繼承實現一個效果，程式碼如下：
<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>