詳解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是局部屬性。

　　然後，形如下面的程式碼：

　　

test

　　#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的屬性。有點類似程式設計中的父子繼承關係。

以上是詳解css裡同時用id和class的原理的詳細內容。更多資訊請關注PHP中文網其他相關文章！