詳解css裡同時用id和class的原理

首先，介紹id和class的區別：

　　1、id是一個標籤，用於區分不同的結構和內容；id是先找到結構/內容，再給它定義樣式；class是一個樣式，可以套在任何結構和內容上；class是先定義好一種樣式，再套給多個結構/內容。

　　2、id是元素的名稱，可以供js或其它指令碼程式來訪問該元素對象，而class是該元素的css類名。

　　3、定義樣式時，id="aa"的用#aa{...}，class="bb"的用.bb{...}。

　　4、class是全域屬性，id是局部屬性。

　　然後，形如下面的代碼：

　　<div id="aa" class="bb">test</div>

　　#aa{ width:300px; height:50px;background-color:Red;}

　　.bb{ width:100px; height:300px; background-color:blue;}

　　這樣的，會如何顯示呢？

　　答案是：顯示為寬300，高50，背景為紅色的test文字區塊。因為class是全域屬性，id是局部屬性，所以，顯示的樣式是class定義了這個屬性後，再加上id新定義的屬性。當class和id屬性重複時，取id的屬性。有點類似於程式設計中的父子繼承關係。