類別選擇器
透過點(.)和一個合法的字串就可以定義一個類別選擇器，例如:
.antzone
上面的程式碼就是一個類別選擇器，但為了讓類別選擇器有效，則需要在html元素中要有對應類別的定義，程式碼如下:
<div id="antzone"></ div>
程式碼實例如下:
<style type="text/css">
.antzone{
width:100px;
height:100px;
}
</style>
<div class="antzone"></div>為了方便閱讀，上面的程式碼進行了精簡，注意class屬性值前面不能加點(.)。也可以給同一個元素施加多個類別選擇器，程式碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>php中文网</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中文网</div>
</body>
</html>class屬性值每一個類別用空格分隔即可，注意前面不能夠加點。
類別選擇器也可以結合元素選擇器一起使用，例如在頁面中有多個元素同時使用了類別"antzone"，但是有時候我們我只想針對class屬性值為antzone的div元素修改樣式，那麼我們可以這樣寫:
div.antzone{
color:blue;
}以上程式碼可以將具有class屬性值為antzone的div元素的字體顏色設定為藍色。
在上面的程式碼中已經介紹了，一個元素可以有多個類別名，中間用空格分隔，其實選擇器也可以讓多個類別連接起來程式碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://ask.php.cn/" />
<title>hp中文网</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中文网</div>
<div class="antzone b">php中文网</div>
</body>
</html>以上程式碼能夠將同時具有antzone和a類的元素有效。
有時候多個選擇器定義了相同的樣式屬性，如下:
.a{
width:100px;
height:100px;
}
.b{
width:100px;
height:100px;
color:red;
}以上程式碼可以修改如下:
.a,.b{
width:100px;
height:100px;
}
.b{
color:red;
} 
