基本範例1

(圖一)

CSS(範例一)

此HTML裡面包含五個區塊，分別是
sample、sub-sample、sub-sub-sample1、sub-sub-sample2、sub-sub-sample3。
(圖一)深灰色區塊為sample，sample是五個區塊裡的最大區塊也是最底層區塊，sample裡包含著sub-sample、sub-sub-sample1、sub-sub-sample2、sub-sub-sample3四個區塊。
(圖一)淺灰色區塊為sub-sample，sub-sample裡包含著sub-sub-sample1、sub-sub-sample2、sub-sub-sample3三個區塊。
(圖一)淡紫色區塊為sub-sub-sample1、紫色區塊為sub-sub-sample2、深紫色區塊為sub-sub-sample3，這三個區塊是分別獨立在sub-sample裡，不會相互影響。
在CSS（範例一）裡分別給五個區塊不同的背景顏色就可以看出其區塊特性。
(圖一)為CSS（範例一）執行後之結果。

HTML

<div id="sample">
<span> sample</span>
<div id="sub-sample">
<span>sub-sample</span>
<div id="sub-sub-sample1">
<span>sub-sub-sample1</span>
</div>
<div id="sub-sub-sample2">
<span>sub-sub-sample2</span>
</div>
<div id="sub-sub-sample3">
<span>sub-sub-sample3</span>
</div>
</div>
</div>

CSS

#sample{background:#000;color:#fff;}
#sub-sample{background:#aaa;color:#383838;}
#sub-sub-sample1{background:#00959f;color:#a7f7fc;}
#sub-sub-sample2{background:#7eb75c;color:#e4fed5;}
#sub-sub-sample3{background:#1f716f;color:#80b3b2;}