1. 程式人生 > >div中 class與id同時使用

div中 class與id同時使用

首先,介紹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的屬性。有點類似於程式設計中的父子繼承關係。