class selector

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;
}

Continuing Learning

new file

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

submit Reset Code

Automatic operation

class selector

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]