What is the difference between class and id when labeling HTML elements?

This time I will bring you the difference between class and id when labeling HTML elements. What are the precautions when labeling HTML elements? The following is a practical case. Let’s take a look.

There are very complex HTML structures in web pages. If we use CSS to define related styles, we need to specify corresponding flags for these structures, and then write corresponding CSS selectors to obtain the styles assigned to them. The two most commonly used annotation attributes are id and class, for example:

<div class=”header” id=”header” ></div>

Now there are more selection methods, such as: Attribute selector, etc. However, it is not recommended to use it. Although the id and class can be omitted by using the attribute selector, there are problems such as inconvenience in later maintenance, poor compatibility with early browsers, and affecting the rendering efficiency of the browser. So, although there are more options, I still recommend using id and class and element name to construct CSS selectors.
Since both id and class can mark HTML structures, what should I choose to use first? This is what this article will discuss.

The difference between id and class

Experienced friends can skip this part.

1. Uniqueness and repeatability

id can only be unique in the web page structure. If you specify the id of an element as aa, then another id cannot appear in the web page. The HTML element for aa. Although powerful browsers will support multiple duplicate IDs and assign corresponding styles, this is not allowed by the standard.

On the contrary, class can be reused in the web page structure. You specify the class of one element as bb, and you can specify the class of the next element as bb. These two elements can be applied with bb at the same time. style. In addition, you can also specify multiple class attribute values ​​​​for an element, so that you will get the styles of multiple attributes at the same time.

2.Priorities in CSSDifferent

In the CSS selector, the priorities for applying styles to id and class are different. The style priority of id is higher than the style priority of class. If I specify the following style for a div with id aa and class bb:

#aa{background:red;}   
.bb{background:blue;}

Then the browser will display a red background.

3. Jump function

Using the id attribute can increase the jump function of the anchor tag. If we specify the id of a div in the page as aa, then we will use the id attribute in the current URL. Add #aa after it, and the page will immediately jump to the location of the div with the ID aa. For example: Baidu Encyclopedia chapter jump. Class does not have this function.

Why use class instead of id

What are the benefits of using class?

1. Reduce naming

Naming complex structures is really a troublesome thing. If I use id to label, then I have to give each structure a name. In web pages, there are many structures with the same style and effect (for example: unified button style), so we just write a common class style, and then assign this class to all structures that require the same style.

2. Highly reusable

class can be reused in other structures, and multiple classes can be applied to a certain element, so that a certain class style can be highly reused. A more extreme practical application is atomic classes, for example:

.fl{float:left;display:inline;}   
.fr{float:rightright;display:inline;}

Write some classes as small and concise as possible, and then directly write class for an element that requires this style (for example: the above float) ( For example: class="fl").
For general applications, for some structures that require the same style, you only need to write one style, and then assign the same class to these structures. This can achieve a high degree of style code reuse, and it is also more convenient to modify.

3. Low priority

The priority of class is higher than element name and lower than id. The feature of low priority can be used to facilitate debugging and style coverage.

If we used id to mark an element before, and we want to modify the style of this element, we can only modify the corresponding CSS style code or use the !important emphasis syntax for a certain style to overwrite the original style.

If the element is marked with class, then we directly add an id to the element, and then construct a CSS selector for the element id to modify and overwrite it.

It is precisely because of these characteristics that we should try to use class to mark elements to facilitate later maintenance.

4.id is also a must.

class is not omnipotent. There are many places where we must use id to mark at the same time.

5. Anchor tag jump

If you want to use anchor tags to jump on the page, you can only specify the id of a certain jump target, because class can be reused multiple times. , so it does not have the jump function.

6. Used in input

When using input, label tags are usually used to describe the function of the input. There are two ways to associate label with input. One is to use the for attribute of label. The attribute value is the id value of input. The other is to wrap the corresponding input with label. Obviously the first method is more flexible and better, but you must specify an id attribute for the corresponding input.

In addition, some special requirements must also use id, which will not be summarized here.

Best usage combination

There have been many criticisms of class before, and some even said that W3C should abolish the class tag. Stalker m was also an avid user of the id attribute, but in In the process of practice, I increasingly discovered the advantages of classes and switched to classes.

A better combination is to use class to specify most elements and structures, and use id annotation for very few elements that require specific functions.

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

Related reading:

How to make mobile web page content adaptive

How to deal with content overflow in the table table

How to obtain the dynamic remaining word count of textarea

The above is the detailed content of What is the difference between class and id when labeling HTML elements?. For more information, please follow other related articles on the PHP Chinese website!