類選擇器
通過(guò)點(diǎn)(.)和一個(gè)合法的字符串就可以定義一個(gè)類選擇器，例如:
.antzone
上面的代碼即是一個(gè)類選擇器，但是為了讓類選擇器有效，則需要在html元素中要有對(duì)應(yīng)類的定義，代碼如下:
<div id="antzone"></div>
代碼實(shí)例如下:
<style type="text/css">
.antzone{
width:100px;
height:100px;
}
</style>
<div class="antzone"></div>為了便于閱讀，上面的代碼進(jìn)行了精簡(jiǎn)，注意class屬性值前面不能加點(diǎn)(.)。也可以給同一個(gè)元素施加多個(gè)類選擇器，代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文網(wǎng)</title>
<style type="text/css">
.antzone{
width:100px;
height:100px;
border:1px solid black;
}
.a{
color:red;
}
.b{
font-weight:bold;
}
</style>
</head>
<body>
<div class="antzone a b">php中文網(wǎng)</div>
</body>
</html>class屬性值每一個(gè)類用空格分隔即可，注意前面不能夠加點(diǎn)。
類選擇器也可以結(jié)合元素選擇器一起使用，例如在頁(yè)面中有多個(gè)元素同時(shí)使用了類"antzone"，但是有時(shí)候我們我只想針對(duì)class屬性值為antzone的div元素修改樣式，那么我們可以這樣寫(xiě):
div.antzone{
color:blue;
}以上代碼可以將具有class屬性值為antzone的div元素的字體顏色設(shè)置為藍(lán)色。
在上面的代碼中已經(jīng)介紹了，一個(gè)元素可以具有多個(gè)類名，中間用空格分隔，其實(shí)選擇器也可以使多個(gè)類連接起來(lái)代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>hp中文網(wǎng)</title>
<style type="text/css">
.antzone{
width:100px;
height:100px;
border:1px solid black;
}
.antzone.a{
color:blue;
}
</style>
</head>
<body>
<div class="antzone a b">php中文網(wǎng)</div>
<div class="antzone b">php中文網(wǎng)</div>
</body>
</html>以上代碼能夠?qū)⑼瑫r(shí)具有antzone和a類的元素有效。
有時(shí)候多個(gè)選擇器定義了相同的樣式屬性，如下:
.a{
width:100px;
height:100px;
}
.b{
width:100px;
height:100px;
color:red;
}以上代碼可以修改如下:
.a,.b{
width:100px;
height:100px;
}
.b{
color:red;
} 
