Difference between Class and ID in css

Class is used to define one or more elements according to user-defined standards. A more appropriate example is a script: a class can define the story line of each character in the script. You can use this class through css tutorials and webpage special effects. Therefore, you can use class = "frodo", class = "gandalf", class = "aragorn" on a page to differentiate different story lines. Another important thing is that you can use any number of classes in a document.

Id is usually used to define a tag that appears only once on the page. In structured layout of page layout (for example, a page is usually composed of a header, a header <masthead>, a content area, and a footer), generally the id is ideal, because an id can only be used once in a document. These elements are rarely larger than once on the same page.

In one sentence, the class can be used repeatedly, and the id can only be used once on a page. It is possible that the same id will not be used repeatedly in many browsers, but it is definitely incorrect in terms of standards, and it may lead to practical problems in some browsers. (I tried it in dreamweaver just now. Indeed, there is no error)

In practical application, the class may be useful for text layout, and the id is useful for macro layout and design of various elements.

Other opinions

Difference between id and class

In addition, as defined by id = "aaa", the style is set in css as follows:
# Aaa {Style List}
Defined in the form of class = "bbb", the style should be set in css as follows:
. Bbb {Style List}
(Note that there is a point above)

Purpose:
There are two types of class elements: Associated and independent. Associated html-related tags, such
H1.redone {color: red}
<H1 class = redone> The font is Red <H1> The font is black

An independent element can be used for all html elements, such
. Classname {property: value}

The id element is similar to a standalone class. The difference is that id is unique and helpful for webpage special effect operations on html elements,

# Idname {property: value}

Concept definition:

Id is the name of an element. It can be accessed by webpage special effects or other script programs, and class is the css class name of the element.

The value of id must be unique in the current webpage, that is, if an element defines id = "aaa", the id of other elements in this webpage cannot be defined as aaa, and class.

Usage principles of id and class

It is said that w3c sets the id and class to be unique and the class is universal. Therefore, the principle of use here is also based on this feature. IDS cannot be repeated. Therefore, in the xhtml structure, IDs must be used for large structures. Such as logo, navigation, subject content, and copyright. The naming rules I have developed are # logo, # nav, # content, # copyright. Some people say that layout uses id and color background uses class. In fact, this is incorrect. id has no direct relationship with layout, and the class and color are not equal. Some people use IDs or all use classes for the sake of trouble. It is understandable that they all use IDs, which is contrary to id uniqueness. If each id is different, it is not exhausting. The principle I have summarized through practice is: id must be unique and should be used in the periphery as much as possible. The class is reproducible and should be used within the structure as much as possible. The advantage of this is that it is conducive to the maintenance and modification of website code in the later stage. This way will make all classes become sublevels of IDs or grandchildren. You can have two sons, but can you have two fathers. When we write css, we can write it like this # father. child {...} Try not to include the class id,. father # child {...} It would be a bit silly to write it like this. Of course, this is not a matter of course. Special treatment is required in special cases. But in general, this form is not necessary.

The above is the usage principle of id and class. To sum up one sentence: id is unique and parent, and class can be repeated and sub-level.

Tips for Using id and class

1. The child-level naming contains the part of the parent name starting. This makes it easy to clarify the hierarchy when writing css.

2. It is best not to use id for sub-level in class. Of course, special circumstances are special.

3. It is best to use case-insensitive names for class naming. For example, newmovie is the most suitable method to use the explicit relationship with the first statement. Note that browsers other than ie are very case sensitive. Also, it must start with a letter.

In fact, the above is all about what everyone understands, but I just picked it up and wrote it down first, which is a summary. I hope you will put forward new ideas and new ideas for the use of id and class. Summarize the most appropriate and efficient specifications.

If the definition is repeated, the priority is:

Style> id> class> default html element

A class is used to define one or more elements according to user-defined standards. For example, a script: a class can define the story line of each character in the script. You can use this class through css and javascript. Therefore, you can use class = "frodo", class = "gandalf", class = "aragorn" on a page to differentiate different story lines. Another important thing is that you can use any number of classes in a document.

Id is usually used to define a tag that appears only once on the page. In structured layout of page layout (for example, a page is usually composed of a header, a header <masthead>, a content area, and a footer), generally the id is ideal, because an id can only be used once in a document. These elements are rarely larger than once on the same page.

In one sentence, the class can be used repeatedly, and the id can only be used once on a page. It is possible that the same id will not be used repeatedly in many browsers, but it is definitely incorrect in terms of standards, and it may lead to practical problems in some browsers.

In practical application, the class may be useful for text layout, and the id is useful for macro layout and design of various elements.