# Label Selector

# id selector

# Category Selector

# Offspring Selector

# child element selector

# Crosspoint selector

# Joint Selector

# Sibling Selector (Adjacent Sibling Selector/Universal Sibling Selector)

# Sequence Selector (the most representative of CSS3)

# Attribute Selector

# Wildcard selector

# Pseudo element selector

label selector

1. What is a tag selector?

Function: according to the specified tag name, find all tags with that name in the current interface, and then set the properties.

2. Format:

Label name {

Attribute: value;

}

note:

1. Label Selector selects all labels in the current interface, but cannot select individual labels.

2. No matter how deep it is hidden, you can choose a tag selector.

Any label in the 3.HTML can be used as a label selector.

Id selector

1. What is an id selector?

Function: Find the corresponding label according to the specified id name, and then set the properties.

Format:

#id name {

Attribute: value;

}

note:

1. Each HTML tag has an attribute named id, which means that each tag can set an id.

2. id names in the same interface cannot be duplicate.

3. When writing the id selector, please make sure to add # before the id name.

four

The name of id has certain specifications.

4. The name of1.if can only consist of letters/numbers/underscores.

4.2. The ID name cannot start with a number.

4.3id The ID name cannot be the name of an HTML tag.

4.4 Generally speaking, in enterprise development, if we just want to set the style, we will not use id, because it is reserved for js in front-end development.

Category selector

What is a class selector?

Function: Find the corresponding label according to the specified class name, and then set the properties.

Format:

. Class name {

Attribute: value;

}

note:

1. Each HTML tag has an attribute named class, which means that each tag can set the class.

2. Class names in the same interface can be duplicated.

3. When writing a class selector, be sure to add before the class name.

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

5. The class name interpretation is specially used to set the style of a specific label.

6. In HTML, each tag can bind multiple class names at the same time.

Format:

& ltlabel Name Class = " Class Name 1 Class Name 2 Class Name 3 " >

Write it wrong.

The difference between id and class?

1. 1

The Id is equivalent to a person's ID card and cannot be duplicated.

Class is equivalent to a person's name and can be repeated.

1.2

An HTML tag can only be bound to one id name.

An HTML bezel can bind multiple class names.

2.2. the id selector starts with #

Class selector with ..

3. Whether to use id selector or class selector in enterprise development.

Id selectors are usually used for js. Unless there are special circumstances, don't use id to set the style.

4. In enterprise development, the technical level of a developer can be seen by using classes.

descendant selector

What is a descendant selector?

-Function: Find all specific descendant tags of the specified tag and set the properties.

-Format:

Label name 1 label name 2{

Attribute: value;

}

First find the tag named tag name 1, then find all tags named tag name 2 under this tag, and then set the properties.

-Note:

1. Descendants selectors must be separated by spaces.

2. The descendants are not only sons, but also grandchildren/great-grandchildren. As long as it is finally placed in the designated label, it is a descendant.

3. Descendant selectors can use not only tag names, but also other selectors.

Subselector

What is a child element selector?

-Role: find a specific direct child element in all tags, and then set the attribute.

-Format:

Label name1> Label name 2{

Attribute: value;

}

First, find the tag named "Tagname 1", and then find all the elements with the direct child named "Tagname 2" in this tag.

-Note:

1. The child element selector only looks for child elements, not other nested tags.

2. Child element selector, between connection, no spaces.

3. The child element selector can use not only the tag name, but also other selectors.

4. the child element selector can be accessed through >: this symbol will always appear.

1. What is the difference between descendant selector and child element selector?

1. 1

Descendants selectors use spaces as connection symbols.

The child element selector uses >: as the connecting symbol.

1.2

The descendant selector will select all the specific descendant tags in the specified tags.

The child element selector will only select all specific direct tags in the specified tags.

2.* * Similarity between descendant selector and child element selector

2. 1

Both descendant selectors and child element selectors can use tag name /id name/class name as selectors.

2.2

Both descendant selectors and child element selectors can continue through their respective connecting symbols.

3. How to choose in enterprise development

Crosspoint selector

What is a crosspoint selector?

-Function: Set properties for the intersection of all labels selected by the selector.

-Format:

Selector 1 Selector 2{

Attribute: value;

}

-Note:

There is no connecting symbol between 1. Selector 1 and Selector 2.

2. The selector can use the name /id name/class name of the tag.

3. Intersection selector is only used as an understanding, and it is not used much in enterprise development.

Joint selector

What is a joint selector?

-Function: Sets properties for all labels selected by the selector.

Format:

Selector 1, selector 2{

Attribute: value;

}

note:

1. The joint selector must be connected to.

2.2. The selector can use the name /id name/class name of the tag.

Brother selector

1. Adjacent sibling selector CSS2

-Function: Sets the property for the label selected by the selector after the specified selector.

Format:

Selector 1+ Selector 2 (

Attribute: value;

}

note:

1. Adjacent sibling selectors must be connected by+.

2. Adjacent selectors at the same level can only select the label that follows them, and cannot select the separator label.

2. Universal Brother Selector CSS3

-Function: Sets properties for all labels selected by all selectors after the specified selector.

-Format:

Selector 1~ Selector 2 (

Attribute: value;

}

-Note:

1. Universal sibling selector must be associated with ~

2. The universal sibling selector selects all labels after the labels selected by the selector behind the specified selector.

Sequence selector (the most representative selector added in CSS3)

1. Which one at the same level?

: first-child selects the first label in the same level.

: last-child selects the last tag in the same level.

: n-child(n) Select the nth tag in the same level.

: n-last-child(n) Select the n-th tag from the bottom in the same level.

: only-child selects the only child element in the parent element.

: n-child (odd) selects all odd marks in the same level.

: n-child(Even)Even selects all even tags of the same level.

: n-child(xn+y) selects all user-defined (xn+y) tags in the same level.

X and y are user-defined, and n is a counter that increments the number of tags from 0.

Note: There is no difference between types.

2. Which one of the same type?

: Type First Select the first label of the same type in the same level.

: last-of-type selects the last one of the same type in the same level.

: n-of-type(n) Select the nth tag of the same type in the same level.

: n-last-of-type(n) Select the nth tag of the same type in the same level.

: only-of-type selects a unique type of tag in the parent element.

Attribute selector

What is an attribute selector?

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

Format:

[attribute]

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

[Attribute = Value]

Function: Find the tag with the specified attribute and the attribute value is equal to value, and then set the attribute.

The most common application scenario is to distinguish input attributes.

What does the value of the 1. attribute begin with?

[Attribute | = Value] CSS2

[attribute^=value] CSS3

The difference between the two:

In CSS2, only tags that start with value and are separated from other content by-can be found, while CSS3 can find all tags that start with value.

2. What does the value of the attribute end with?

[Attribute $ = Value]? CSS3

3. Whether the value of the attribute contains a specific value.

[Attribute ~ = Value] CSS2

[Attribute * = Value] CSS3

The difference between the two:

Only independent words can be found in CSS2, that is, values are separated from other contents by spaces, while CSS3 can find all tags containing values.

Wildcard selector

What is a wildcard selector?

-Function: Set the properties of all tabs in the current interface.

-Format:

*{

Attribute: value;

}

-Note:

Wildcards are the properties of all labels in the setting interface, so all labels will be traversed before setting. If there are many labels on the current interface, the performance will be poor, so wildcard selectors are generally not used in enterprise development.

1. What is a pseudo-element selector?

The function of the pseudo-element selector is to add sub-elements before the content of the specified label, or add sub-elements after the content of the specified label.

Format:

Adds a child element before the content of the specified label.

Label name:: before {

Attribute name: value;

}

Adds a child element after the contents of the specified tag.

Label name:: before {

Attribute name: value;

}