Home > Article > Web Front-end > What are id and Class selectors in CSS? Usage of id and Class selectors (examples)

What are id and Class selectors in CSS? Usage of id and Class selectors (examples)

青灯夜游Original: 2018-09-15 09:23:353426browse

This chapter will introduce to youWhat are id and Class selectors in CSS? Usage of id and Class selectors (example). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1. 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 attributes id="demo", id="para1":

#demo{ width: 500px; height: 200px; margin: 50px auto; } 
#para1 { text-align:center; color:red; }

Note: Do not start the ID attribute with a number. IDs starting with numbers are in Mozilla/Firefox Doesn't work in browser.

Sample code:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>id 选择器</title>
		<style>
		     #demo{ width: 500px; height: 200px; margin: 50px auto; } 
                     #para1 { text-align:center; color:red; }
		</style>
	</head>
	<body>
		<div id="demo">
			<p id="para1">Hello World!</p>
			<p>这个段落不受该样式的影响。</p>
		</div>
	</body>
</html>

Rendering:

What are id and Class selectors in CSS? Usage of id and Class selectors (examples)

##2. Class selector

The 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.

.center {text-align:center;}

Sample code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>class 选择器/title> 
<style>
.center
{
    text-align:center;
}
</style>
</head>

<body>
<h1 class="center">标题居中</h1>
<p class="center">段落居中。</p> 
</body>
</html>

Rendering:

What are id and Class selectors in CSS? Usage of id and Class selectors (examples)

You 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:

p.center {text-align:center;}

Note: The first character of the class name Numbers cannot be used! It won't work in Mozilla or Firefox.

Code example:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>css教程</title> 
<style>
p.center
{
    text-align:center;
}
</style>
</head>

<body>
<h1 class="center">这个标题不受影响</h1>
<p class="center">这个段落居中对齐。</p> 
</body>
</html>

Rendering:

What are id and Class selectors in CSS? Usage of id and Class selectors (examples)

The above is the detailed content of What are id and Class selectors in CSS? Usage of id and Class selectors (examples). For more information, please follow other related articles on the PHP Chinese website!

firefox css html class 选择器

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to set the Table style in CSS? (code example)Next article：How to set the Table style in CSS? (code example)

See more

What are id and Class selectors in CSS? Usage of id and Class selectors (examples)

Related articles