你對CSS類選擇其的概念和用法是否了解,這裡和大家分享一下,希望對你的學習有所幫助。
CSS類選擇器class
在CSS中類選擇器以一個點號顯示:
- .center{text-align:center}
在上面的例子中,所有擁有center類的Html元素均為居中。
在下面的Html代碼中,h1和p元素都有center類。這意味著兩者都將遵守".center"選擇器中的規則。
- <h1classh1class="center">
- Thisheadingwillbecenter-aligned
- </h1>
- <pclasspclass="center">
- Thisparagraphwillalsobecenter-aligned.
- </p>
注意:類名的第一個字符不能使用數字!它無法在Mozilla或Firefox中起作用。
◆和id一樣,class也可被用作派生選擇器:
- .fancytd{
- color:#f60;
- background:#666;
- }
在上面這個例子中,類名為fancy的更大的元素內部的表格單元都會以灰色背景顯示橙色文字。(名為fancy的更大的元素可能是一個表格或者一個div)
◆元素也可以基於它們的類而被選擇:
- td.fancy{
- color:#f60;
- background:#666;
- }
在上面的例子中,類名為fancy的表格單元將是帶有灰色背景的橙色。
<tdclass="fancy">你可以將類fancy分配給任何一個表格元素任意多的次數。那些以fancy標注的單元格都會是帶有灰色背景的橙色。那些沒有被分配名為fancy的類的單元格不會受這條規則的影響。還有一點值得注意,class為fancy的段落也不會是帶有灰色背景的橙色,當然,任何其他被標注為fancy的元素也不會受這條規則的影響。這都是由於我們書寫這條規則的方式,這個效果被限制於被標注為fancy的表格單元(即使用td元素來選擇fancy類)。
【編輯推薦】