10個最常用的CSS className

 很多做前端開發的在為頁面元素定class的時候經常會拿不定主意，導致隨意使用class，一個好的class要能夠描述出某個特定元素的表現，
在符合團隊開發流程、規範的情況下也要注意在工作中形成一套自己的風格，下面是我最經常使用的個人認為命名比較恰當和有一定作用的10個class。

　　1.class=”fixed”

　　fixed這個class幾乎出現在沒個樣式檔案中，用在為包含浮動子項目的容器元素清除浮動，樣式如下

 

以下為引用的內容： .fixed:after{  content:".";  display:block;  height:0;  clear:both;  visibility:hidden;  } .fixed{  display:block;  } /*  */ .fixed{  min-height:1%;  } * html .fixed{  height:1%;  }

這個樣式就可以用在下面的情形，每個li都是浮動的：

 

以下為引用的內容：  <ul class="fixed">  <li><img src="images/img_01.jpg" alt="First Thumb" /></li>  <li><img src="images/img_02.jpg" alt="Second Thumb" />    ...</li> </ul>

　　2.class=”alt”

　　alt是”alternative”(交替)的簡稱，這個class用在有一組樣式一樣的元素，需要為其中的某幾個設定特別的樣式，比如一組向左浮動的圖片中需要有一張是向右浮動,可以這樣：

 

以下為引用的內容：  #content img{  float:left;  display:inline;  margin-right:10px;  border:1px solid #ccc;  padding:1em 0;  background:#fff;  } #content img.alt{  float:right;  margin-right:0;  margin-left:10px;  }

　　3.class=”selected”

　　這個最經常用的，用來處理mouseover或選中元素的效果。

 

以下為引用的內容： <li class="selected"><a href="/about">About Us</a></li>

　　4.class=”first”, class=”last”

　　直到99.9% 的瀏覽器支援:first-child和:last-child這兩個偽類之前，class=”first”, class=”last”用的地方還是很多的。

　　5.class=”image”

　　平常選擇圖片元素一般用類似(#container img)這樣的標籤選取器，但是我這裡的class=”image”是用在包含圖片的容器元素，假如你正在做一個新聞列表，需要在新聞標題下面加一行帶圖片和解說文字，並且向右浮動，可以這樣做：

 

以下為引用的內容：   <img src="/images/img_me.jpg" alt="my funny face" />  This is me trying to look cool!    The rest of the content here  ...

　　6. class=”inner”

　　inner也是經常使用的class，而且大部分上是用來製造視覺上的額外效果，用來給嵌套在容器裡的子容器定義樣式(比如製作雙背景圖片效果)：

　　7.class=”link”

　　link跟image類似，我用來嵌套一個A標籤，最經常用來製作”Read More”連結：

 

以下為引用的內容： <a href="#">Read more...</a>

　　8.class=”one”, class=”two”, class=”three”…

　　這些class用在需要區別每個子項目的清單項目，比如用移動背景圖片來製作導覽功能表：

 

以下為引用的內容： <ul>  <li class="one"><a href="#">Home</a></li>  <li class="two"><a href="#">About</a>    ...</li> </ul>

　　9.class=”even”, class=”odd”

　　用來實現隔行換樣式，一般用在表格和列表：

 

以下為引用的內容：  <ul>  <li class="even">Content</li>  <li class="odd">Content</li>  <li class="even">Content</li>  <li class="odd">Content</li> </ul>

　　10.class=”section”

　　一般用在為指定內容中特定部分添加特定的樣式：

 

以下為引用的內容： <div class="section">  content here...</div>