CSS：class選擇器的使用
阿新 • • 發佈：2018-12-26
本文介紹css中class選擇器的基本用法：為同一個型別的標籤設定屬性。
程式碼整理自w3school：http://www.w3school.com.cn
效果圖：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="zh-cn" /> <title>class選擇器的使用</title> <!--在 CSS 中，類選擇器以一個點號顯示。一個類可以被使用多次。--> <!--語法：A.B C，如table.blueStyle td blueStyle：class名； table：blueStyle只能作為table的屬性； td：table之下的td標籤的內容將應用blueStyle指定的屬性--> <head> <style type="text/css"> .redStyle {color: red} .greenStyleForSpan span {color: green} table.blueStyle td {background-color:#99f} </style> </head> <body bgcolor="#eee"> <!--所有擁有redStyle類的html元素都將顯示為紅色--> <h3>（一）redStyle類被定義在所有的html標籤之上</h3> <p>我不擁有redStyle類</p> <p class="redStyle">我是一個p，擁有redStyle類，所以我是紅色的</p> <h4 class="redStyle">我是一個h4，擁有redStyle類，所以我是紅色的</h4> <hr/> <!--和 id 一樣，class 也可被用作派生選擇器：--> <h3>（二）greenStyleForSpan類被定義在所有的html標籤之上並且只對下屬span有效</h3> <div class="greenStyleForSpan"> <p>我是一個p，我所屬的div具有greenStyleForSpan類。</p> </div> <div class="greenStyleForSpan"> <span>我是一個span，我所屬的div具有greenStyleForSpan類。</p> </div> <span class="greenStyleForSpan">我是一個span，我自己具有greenStyleForSpan類。</p> <hr/> <h3>（三）blueStyle類被定義為table的屬性，並且只有table下屬的td將應用這個屬性。</h3> <h4>(1)blueStyle類被使用在table上級的div中了，因此table之下的td沒有應用blueStyle屬性</h4> <div class="blueStyle"> <table cellpadding="10px" border="1"> <tr> <th>省份</th> <th>面積</th> <tr> <tr> <td>河南省</th> <td>16.8</th> <tr> <tr> <td>湖北省</th> <td>18.1</th> <tr> </table> <div> <h4>(2)blueStyle類被使用在table中了，因此table之下的td應用了blueStyle屬性，而table之下的p和th則沒有應用這個屬性。</h4> <table class="blueStyle" cellpadding="10px" border="1"> <p>我是table中的一個p</p> <tr> <th>省份</th> <th>面積</th> <tr> <tr> <td>河南省</th> <td>16.8</th> <tr> <tr> <td>湖北省</th> <td>18.1</th> <tr> </table> </body> </html>
