Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch

类选择器

通过点(.)和一个合法的字符串就可以定义一个类选择器，例如:

.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;
}
Weiter lernen
||
<!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>
einreichenCode zurücksetzen
Vorherige Sektion nächsten Abschnitt
Tutorial-Liste
Hilfe bekommen
  • Kursempfehlungen
  • Kursunterlagen herunterladen
Die Kursunterlagen stehen derzeit nicht zum Download zur Verfügung. Die Mitarbeiter organisieren es derzeit. Bitte schenken Sie diesem Kurs in Zukunft mehr Aufmerksamkeit

Auch Studierende, die diesen Kurs gesehen haben, lernen

Das neueste Video-Tutorial zur Weltpremiere von ThinkPHP 5.1 (60 Tage zum Online-Schulungskurs zum PHP-Experten)  492872 spielt ab