How to use id and class selectors in CSS

#I often use id and class to specify the scope of application styles. However, it is difficult to determine whether to use id or class correctly. In this article, we will introduce the usage of id and class.

The difference between id and class

id is unique, and class can have many

Only one ID can be written to the page, but multiple IDs can be written to the class.

However, this does not mean that you must use id if the page only displays one. There are restrictions on the use of ids.

If there is a style conflict between id and class, id takes precedence

Let’s take an example to see it.

HTML

<p id="red" class="blue">ID和class优先级比较——文字颜色</p>

CSS

#red{
color:red;
}
.blue{
color:blue;
}

The effect is as follows:

The font shown in the above picture is red Yes, that is because the priority of id is higher than the priority of class, so the final displayed color is red.

You can jump to the id within the page

By linking to the id, you can jump to the corresponding id position.

<a name="#ananker name">跳转到id </a>

Often use this to set the jump function at the beginning of the page.

Where can I use id

First of all, as a major premise, there are no restrictions on the use of class, but there are restrictions on id.

Frankly speaking, this can often be done, even if you describe it with a class without using an id, there is no problem. Therefore, instead of thinking about how to distinguish the use, it is better to consider where to use the id.

The place where ID is used is "unique" or "best done".

When you want to add an intra-page jump function

When using the intra-page jump function, please use id because it cannot be implemented with class.

Used where "unique" can be set

There is basically only one page part in the page, such as title, content, sidebar, footer. This kind of thing is easier to implement using ID.

Summary of common parts in class, use id to override styles

This is a specification using CSS, where id takes precedence over class.

Web pages have a certain layout based on the page, but there are many similar parts. You can compress your CSS by writing standard styles as classes and using ids to write the characteristic parts of each page.

The selector matching process of id is faster

When using jQuery etc. to perform selector matching processing, it is faster when specifying id. This is because if it is specified by id, then finding it in the page can complete the processing, while if it is a class, it needs to be scanned to the end.

The above is the detailed content of How to use id and class selectors in CSS. For more information, please follow other related articles on the PHP Chinese website!