Detailed explanation of the principle of using both id and class in css

First of all, introduce the difference between id and class:

1. id is a label used to distinguish different structures and contents; id is to first find the structure/content and then define a style for it; class is A style can be applied to any structure or content; a class defines a style first and then applies it to multiple structures/contents.

　2. id is the name of the element, which can be used by js or other scripts to access the element object, and class is the css class name of the element.

3. When defining the style, use #aa{...} for id="aa" and .bb{...} for class="bb".

　4. Class is a global attribute, and id is a local attribute.

　 Then, the code looks like the following:

　#aa{ width :300px; height:50px; background-color:Red;}

　.bb{ width:100px; height:300px; background-color:blue;}

How will this be displayed? Woolen cloth?

The answer is: display a test text block with a width of 300, a height of 50, and a red background. Because class is a global attribute and id is a local attribute, the displayed style is the newly defined attribute of id after class defines this attribute. When the class and id attributes are repeated, the id attribute is taken. It is somewhat similar to the parent-child inheritance relationship in programming.

The above is the detailed content of Detailed explanation of the principle of using both id and class in css. For more information, please follow other related articles on the PHP Chinese website!