介紹css裏同時用id和class的原理

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

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

　　二、id是元素的名稱，能夠供js或其它腳本程序來訪問該元素對象，而class是該元素的css類名。

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

　　四、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的屬性。有點相似於程序設計中的父子繼承關係。