クラスセレクター
クラス セレクターは、ドット (.) と正当な文字列で定義できます。例:
.antzone
上記のコードはクラス セレクターですが、クラス セレクターを有効にするには、以下が必要です。コードは次のとおりです:
<div id="antzone"></div>
コードの例は次のとおりです:
<style type="text/css">
.antzone{
width:100px;
height:100px;
}
</style>
<div class="antzone"></div>For読みやすいように、上記のコードは次のとおりです。わかりやすくするために、クラス属性値の前にドット (.) を付けることはできないことに注意してください。同じ要素に複数のクラス セレクターを適用することもできます。コードは次のとおりです。
<!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>各クラスの前にドットを追加できないことに注意してください。
クラス セレクターは、要素セレクターと組み合わせて使用することもできます。たとえば、ページ上にクラス「antzone」を同時に使用する要素が複数ありますが、その div 要素のスタイルのみを変更したい場合があります。 class 属性値が antzone の場合、次のように記述できます:
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{
width:100px;
height:100px;
}
.b{
width:100px;
height:100px;
color:red;
}上記のコードは次のように変更できます:
.a,.b{
width:100px;
height:100px;
}
.b{
color:red;
}
新しいファイル
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<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">hp中文网</div>
<div class="antzone b">hp中文网</div>
</body>
</html>
プレビュー
Clear
- おすすめコース
- コースウェアのダウンロード
現時点ではコースウェアはダウンロードできません。現在スタッフが整理中です。今後もこのコースにもっと注目してください〜
このコースを視聴した生徒はこちらも学んでいます
