类选择器

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

.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;
}
继续学习
||
<!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>
提交重置代码
章节
笔记
提问
课件
反馈
捐赠

CSS3从入门到精通教程