Category 5 CSS Selector

The CSS selector can accurately find the specified tag. Using the CSS selector allows us to easily define CSS styles for the tag, rather than defining CSS styles for each tag.

The following describes the five most common CSS selectors:

I. Tag selector: it is usually used to find a tag in HTML.

For example:

To design a style for all P tags in HTML, use the following method:

P {Font: 12px ;}

Ii. ID selector: it is usually used to find the ID in the tag as the specified value.

For example:

In HTML, there is such a tag <Div id = "menubar"> </div>. We can see that the id value is menubar,

Now we need to define the style for the value of ID as menubar.

# Menubar {
Margin: 0 auto;
Background: # CCC;
Color: # c00;
}

Iii. class selector: The class selector is mainly used to find a group of tags of the same type.

For example, in HTML, the class selector is used to find a group of tags whose attribute class is of a certain type in tags, such as <SPAN class = "da1">

We can
. Da1 {
Color: # f60;
Font-size: 14px;
}

In this way, all labels whose class is da1 will apply this style.

Iv. Descendant selector: The descendant selector is also called a derivative selector. You can use the descendant selector to define a style for the child element in an element.

For example:

Li strong {
Font-style: italic;
Font-weight: 800;
Color: # f00;
}
Define the above style for the Child tag strong under the Li tag in HTML

5. Group selector: You can use the group selector to find a group of selectors.
For example, when several selectors use the same style, you can use the following method:

. Text1 H1, # Sider H3,. art_title H2 {
Font-weight: 100;
}

Note that the selectors are separated by commas (,).

 

In fact, the CSS selector technology can be used not only on CSS, but also on other DOM elements. For example, the Javascript framework jquery uses the CSS selector technology.