CSS selectors
CSS selector
#CSS selector is divided into two types
Id and Class Selectors
#If you want to set CSS styles in HTML elements, you need to set the "id" and "class" selectors in the element.
#id selector
The id selector can specify a specific style for HTML elements marked with a specific id. The HTML element uses the id attribute to set the id selector, and the id selector in CSS is defined with "#". The following style rules apply to the element attribute id="para1": <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
#para1
{
text-align:center;
color:red;
}
</style>
</head>
<body>
<p id="para1">php中文网(php.cn)</p>
<p>这一段不受css样式影响。</p>
</body>
</html>Run the program to try it The ID attribute should not start with a number. IDs starting with numbers do not work in Mozilla/Firefox browsers. 
class selector
class selector is used to describe the style of a group of elements. The class selector is different from the id selector. , class can be used in multiple elements. The class selector is represented by the class attribute in HTML. In CSS, the class selector is displayed with a dot ".": In the following example, all objects with the center class HTML elements are all centered.Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">标题居中</h1>
<p class="center">段落居中。</p>
</body>
</html>Run the program to try itYou can also specify specific HTML elements using classes. In the following example, all p elements use class="center" to center the text of the element:
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
p.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">这个标题将不会受到影响</h1>
<p class="center">这一段将居中对齐</p>
</body>
</html>Run the program and try itThe first character of the class name cannot use numbers! It won't work in Mozilla or Firefox. 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
#para1
{
text-align:center;
color:red;
}
</style>
</head>
<body>
<p id="para1">php中文网(php.cn)</p>
<p>这一段不受css样式影响。</p>
</body>
</html>
