クラスセレクター

クラスセレクターは、ドット (.) と正当な文字列で定義できます。例:

.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>

提出するリセットコード

自動運転