免費(fèi)AI編程助手
本文介紹 css 中 class 選擇器的基本用法：為同一個(gè)類(lèi)型的標(biāo)簽設(shè)置屬性。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>class選擇器的使用</title>
<!--在 CSS 中，類(lèi)選擇器以一個(gè)點(diǎn)號(hào)顯示。一個(gè)類(lèi)可以被使用多次。-->
<!--語(yǔ)法：A.B C，如table.blueStyle td
blueStyle：class名；
table：blueStyle只能作為table的屬性；
td：table之下的td標(biāo)簽的內(nèi)容將應(yīng)用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類(lèi)的html元素都將顯示為紅色-->
<h3>（一）redStyle類(lèi)被定義在所有的html標(biāo)簽之上</h3>
<p>我不擁有redStyle類(lèi)</p>
<p class="redStyle">我是一個(gè)p，擁有redStyle類(lèi)，所以我是紅色的</p>
<h4 class="redStyle">我是一個(gè)h4，擁有redStyle類(lèi)，所以我是紅色的</h4>
<hr/>
<!--和 id 一樣，class 也可被用作派生選擇器：-->
<h3>（二）greenStyleForSpan類(lèi)被定義在所有的html標(biāo)簽之上并且只對(duì)下屬span有效</h3>
<div class="greenStyleForSpan">
<p>我是一個(gè)p，我所屬的div具有g(shù)reenStyleForSpan類(lèi)。</p>
</div>
<div class="greenStyleForSpan">
<span>我是一個(gè)span，我所屬的div具有g(shù)reenStyleForSpan類(lèi)。</p>
</div>
<span class="greenStyleForSpan">我是一個(gè)span，我自己具有g(shù)reenStyleForSpan類(lèi)。</p>
<hr/>
<h3>（三）blueStyle類(lèi)被定義為table的屬性，并且只有table下屬的td將應(yīng)用這個(gè)屬性。</h3>
<h4>(1)blueStyle類(lèi)被使用在table上級(jí)的div中了，因此table之下的td沒(méi)有應(yīng)用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類(lèi)被使用在table中了，因此table之下的td應(yīng)用了blueStyle屬性，而table之下的p和th則沒(méi)有應(yīng)用這個(gè)屬性。</h4>
<table class="blueStyle" cellpadding="10px" border="1">
<p>我是table中的一個(gè)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>效果圖：
