The previous section introduced several basic selectors. This section shares the difference between id and class.

The id and class attributes are two common attributes in web pages. They work together to make The entire page becomes colorful. When we define a style for an element. You can use id or class. But we should also pay attention to the difference between the two.

1. When writing in a CSS style sheet, the prefix symbol ‘#’ should be added in front of the id selector, and the prefix symbol ‘.’ should be added in front of the class selector.

2. The id attribute can generally only be used once in a page, while the class can be referenced multiple times.

3. ID is used as a tag of an element to distinguish different structures and contents, while class is a style that can be applied to any structure and content.

4. In terms of layout ideas, we generally adhere to this principle: id determines the structure and content of the page first, and then defines the style for it: on the contrary, class defines a type of style first, and then Apply class styles to different elements and content on the page as needed.

5. Currently, browsers allow multiple IDs with the same attribute value to appear on the same page. Under normal circumstances, they can be displayed normally. However, when using JavaScript to control elements through IDs, errors will occur. .

6. In actual application, class is more used in text sections and page modifications, while id is more used to implement grand layouts and design containing blocks or containing box styles.

Note:

ID has the characteristics of high priority and uniqueness. Refers to "individual".
Compared to ID, the priority of class is relatively moderate, specifically referring to "specific groups".
The use of Class requires reference to object-oriented abstract concepts and abstracting common attributes.

ID is to find the structure/content first, and then define the style for it;
Class is to define a style first, and then apply it to multiple structures/content.