Home > Web Front-end > CSS Tutorial > css: What is the difference between class and id in div?

css: What is the difference between class and id in div?

黄舟
Release: 2017-07-20 09:09:10
Original
1863 people have browsed it

1. class is the class that sets the label, and the class attribute is used to specify which style class the element belongs to.

For example, you can add .content1 { color: red; background: #ff80c0 } to the style sheet. How to use: class="content1" .

id is the identifier of the set label . The id attribute is used to define a unique style of an element. For example, a CSS rule #content2 { font-size: larger } is used as follows: id="content2"


The concepts are different (the following two sentences are still comparable Insightful):

Class is a style, which must be defined first, and then can be applied to multiple structures/contents. Easy to reuse. In other words, the class names can be the same.

id is a label used to distinguish different structures and contents, just like your name. If there are two people with the same name in a room, confusion will occur ;ID is to find the structure/content first, and then define the style for it;

2. Attribute priority issue

The priority of id is higher than class. You can write an example yourself. Part of the code is as follows ( is written by me, not the original author ):


##

<html>
<head>
<style type="text/css">
#aa 
{
	color:red
}

.aa 
{
	color:blue
}
</style>
</head>

<body>
<p id="aa" class="aa">I love you.</p>
</body>

</html>
Copy after login

3. About js

If you want to perform script operations (js) on an object in the page, you can define an id for it. Otherwise, you can only use traversing the page elements and specifying specific attributes. It is a relative waste of time and resources to find it, and it is far less simple than an ID.



The above is the detailed content of css: What is the difference between class and id in div?. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template