Detailed explanation of label, id, class selector

Label selector

What is a tag selector

According to the specified tag name, find all tags with that name in the current page, and then set the attributes.

format
标签 {
    
    
    属性:;
}

important point:

1. The tag selector selects all the tags in the current interface, and you cannot select a single tag.

2. The label selector can be selected no matter how deep the label is hidden, nested layer by layer, as long as it is p label all modify the style.

3 All tags can be used as tag selectors. (H/a/input...)

id selector

What is id selector

Find the corresponding label according to the specified id name, and then set the attribute.

format
#id名称{
    
    
属性:;
}

note:

1.Each tag has an attribute called id.

2. The id name cannot be repeated in the same interface.

3. When writing an id selector, you must add # before the id.

4. The id name can only consist of letters, numbers, and underscores. [A-z0-9_], but cannot start with a number.

5. The id name cannot be the html tag name.

6. In enterprise development, if it is only for style setting, we will not use id. In front-end development, id is generally used by js.

Class selector

What is a class selector

Find the corresponding label according to the specified class name, and then set the attributes.

format:
.类名{
    
    
属性:;
}

note:

1.Each tag has an attribute called class.

2. The class name can be repeated in the same interface.

3. When writing a class selector, be sure to add. Before class .

4. The naming convention of class name is the same as that of id name.

5. The class name specifically sets the style for the label of a specific label

6. Each tag in HTML can add multiple class names at the same time .

<tag name class="class name 1 class name 2 ...">, two calss cannot be written.

The difference between id and class

1. The id is equivalent to the ID card and cannot be repeated, and the class can be repeated, just as the objects instantiated by the same class are all of the same class.

2. An html tag can only be bound with one id name, and multiple class tags can be bound.

The difference between id selector and class selector

1. The id selector starts with #, and the class selector starts with.

2. ID is generally used by js, unless special circumstances are clear, do not use id to change the style

3. The priority of these two selectors will be higher than that of the label selector. If the label selector is set with a uniform style, it can be modified by these two selectors.

4. You can extract some common code into a class selector, and then bind the label to this class selector.

Shortcut key: p#id name.class name+table key to directly generate id class attribute

Guess you like

Origin blog.csdn.net/LIUCHUANQI12345/article/details/109167154