クラスセレクター
クラス セレクターは、ドット (.) と正當(dāng)な文字列で定義できます。例:
.antzone
上記のコードはクラス セレクターですが、クラス セレクターを有効にするには、以下が必要です。コードは次のとおりです:
<div id="antzone"></div>
コードの例は次のとおりです:
<style type="text/css">
.antzone{
width:100px;
height:100px;
}
</style>
<div class="antzone"></div>For読みやすいように、上記のコードは次のとおりです。わかりやすくするために、クラス屬性値の前にドット (.) を付けることはできないことに注意してください。同じ要素に複數(shù)のクラス セレクターを適用することもできます。コードは次のとおりです。
<!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>各クラスの前にドットを追加できないことに注意してください。
クラス セレクターは、要素セレクターと組み合わせて使用??することもできます。たとえば、ページ上にクラス「antzone」を同時(shí)に使用する要素が複數(shù)ありますが、その div 要素のスタイルのみを変更したい場(chǎng)合があります。 class 屬性値が antzone の場(chǎng)合、次のように記述できます:
div.antzone{
color:blue;
}上記のコードは、class 屬性値 antzone を持つ div 要素のフォントの色を青に設(shè)定できます。
上記のコードで紹介したように、要素はスペースで區(qū)切られた複數(shù)のクラス名を持つことができます。実際、セレクターは次のとおりです:
<!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>上記のコードは、antzone とクラスの要素を組み合わせることができます。は有効です。
次のように、複數(shù)のセレクターが同じスタイル屬性を定義する場(chǎng)合があります:
.a{
width:100px;
height:100px;
}
.b{
width:100px;
height:100px;
color:red;
}上記のコードは次のように変更できます:
.a,.b{
width:100px;
height:100px;
}
.b{
color:red;
} 
