You can define a class selector by dot (.) and a legal string, for example:
.antzone
The above code is a Class selector, but in order for the class selector to be effective, the corresponding class needs to be defined in the html element. The code is as follows:
<div id="antzone"></ div>
The code example is as follows:
<style type="text/css">
.antzone{
width:100px;
height:100px;
}
</style>
<div class="antzone"></div>In order to facilitate reading, the above code has been simplified. Note that the class attribute value cannot be preceded by a dot (.). You can also apply multiple class selectors to the same element. The code is as follows:
<!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 attribute value. Each class can be separated by spaces. Note that you cannot add a dot in front.
Class selectors can also be used in conjunction with element selectors. For example, there are multiple elements on the page that use the class "antzone" at the same time, but sometimes we only want to target div elements whose class attribute value is antzone. To modify the style, we can write like this:
div.antzone{
color:blue;
}The above code can set the font color of the div element with the class attribute value antzone to blue.
As introduced in the above code, an element can have multiple class names, separated by spaces. In fact, the selector can also connect multiple classes. The code is as follows:
<!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>The above code can make elements with both antzone and a classes valid.
Sometimes multiple selectors define the same style attribute, as follows:
.a{
width:100px;
height:100px;
}
.b{
width:100px;
height:100px;
color:red;
}The above code can be modified as follows:
.a,.b{
width:100px;
height:100px;
}
.b{
color:red;
}Next Section