类选择器
通过点(.)和一个合法的字符串就可以定义一个类选择器，例如:
.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;
} 
面对疾风吧
可以可以
8年前 添加回复 0