DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> CSS類選擇器class用法探究
CSS類選擇器class用法探究
編輯:CSS詳解     

你對CSS類選擇其的概念和用法是否了解,這裡和大家分享一下,希望對你的學習有所幫助。

CSS類選擇器class

在CSS中類選擇器以一個點號顯示:

  1. .center{text-align:center}

在上面的例子中,所有擁有center類的Html元素均為居中。

在下面的Html代碼中,h1和p元素都有center類。這意味著兩者都將遵守".center"選擇器中的規則。

  1. <h1classh1class="center">
  2. Thisheadingwillbecenter-aligned
  3. </h1>
  4. <pclasspclass="center">
  5. Thisparagraphwillalsobecenter-aligned.
  6. </p>

注意:類名的第一個字符不能使用數字!它無法在Mozilla或Firefox中起作用。

◆和id一樣,class也可被用作派生選擇器:

  1. .fancytd{
  2. color:#f60;
  3. background:#666;
  4. }

在上面這個例子中,類名為fancy的更大的元素內部的表格單元都會以灰色背景顯示橙色文字。(名為fancy的更大的元素可能是一個表格或者一個div)

◆元素也可以基於它們的類而被選擇:

  1. td.fancy{
  2. color:#f60;
  3. background:#666;
  4. }

在上面的例子中,類名為fancy的表格單元將是帶有灰色背景的橙色。

<tdclass="fancy">你可以將類fancy分配給任何一個表格元素任意多的次數。那些以fancy標注的單元格都會是帶有灰色背景的橙色。那些沒有被分配名為fancy的類的單元格不會受這條規則的影響。還有一點值得注意,class為fancy的段落也不會是帶有灰色背景的橙色,當然,任何其他被標注為fancy的元素也不會受這條規則的影響。這都是由於我們書寫這條規則的方式,這個效果被限制於被標注為fancy的表格單元(即使用td元素來選擇fancy類)。

【編輯推薦】

  1. CSS border屬性邊框用法揭秘
  2. IE6.0對padding的解讀分析
  3. CSS樣式表高效使用八大秘訣
  4. 實現CSS垂直居中的五大方法及優缺點
  5. IE6中常見CSS兼容性解決十大技巧
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved