div中 class與id同時使用
阿新 • • 發佈:2019-01-26
首先,介紹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的屬性。有點類似於程式設計中的父子繼承關係。