CSS Selector detailed

Core Tip: What is a type selector? A character that is the name of an existing label type in a Web page. The body is a type of tag in a Web page, Div,p,span.

One, type selector

What is a type selector? A character that is the name of an existing label type in a Web page. The body is a type of tag in a Web page, Div,p,span.
As follows:

Body {}
div {}
P {}
span {}

Second, group selector

For a Xhmtl object, you can make the same style assignment for a group at the same time.
By separating the selectors with commas, the advantage of writing is that the same style only needs to be written once, reducing the amount of code and improving the structure of the CSS code.
When used, it should be noted that "comma" is in half-width mode, not Chinese full-width mode.
As follows:

H1,h2,h6,p,span
{
font-size:12px;
Color: #FF0000;
font-family:arial;
}

Three, including the selection character

The choice of a child object in an object is styled as a way to guide it.
Note that only the child object labels for this object are valid, and this style setting is not applied to other child objects that exist separately or are located outside this object.
The advantage of doing this is to help us avoid too many IDs, class settings, and directly define the elements that are required.
As follows:

H2 span
{
color:red;
}
As follows:
Body H1 span Strong
{
Font-weight:bold;
}

Four, ID selector

Depending on the selector that appears in the DOM document Object model principle, each of these tags can be assigned a name assignment in the form of a id= "" for an XHTML file, but it is important to note that in an XHTML file the ID is unique and cannot be duplicated.
In a div CSS layout page, you can name different uses, such as header headers and footer at the bottom.
XHTML is as follows:

<div id= "Content" ></div>

CSS is as follows:

#content
{
font-size:14px;
line-height:120%;
}

Five, class selector

In fact the ID is an extension of the XHTML tag, and class is a combination of multiple labels for shtml, which means class or category.
For XHTML tags, use class= "" for name assignment. Unlike IDs, class can be reused and can be defined directly as a class for elements with the same style.
The advantages of using class are self-evident, it is a good embodiment of CSS code reusability, many of the tags can be defined using a style without the need to write a single style code.
XHTML is as follows:

<p class= "he" ></p>
<span class= "he" ></span>

CSS is as follows:

. he
{
margin:10px;
background-color:red;
}

The selector of the label's specified type

If you want to use both ID and class, and you want to use the tag selector at the same time, you can use the following methods:

H1#content {}
/* represents all H1 tags with content ID * *
H1.P1 {}
/* indicates that all class-P1 h1 tags are * *

LABEL specifies that the precision of the selector is between the label selector and the Id/class selector, and is one of the commonly used selectors.

Seven, combination selector

For all of the above selectors, use a combination. As follows:

H1. P1 {}
/* indicates that all classes under H1 are labeled P1.
#content H1 {}
Represents all H1 labels under a label with content ID
H1. P1, #content H1 {}
/* Indicates all the H1 tags under H1 for all class P1 and ID content tags.
H1#content h2{}
/*id for the content of the H1 label under the H2 label * *

CSS selector is very free and flexible, can be based on the needs of the page, using a variety of selectors, as much as possible to structure and optimize the CSS file.