The most common CSS selector in Design

Some novice friends have a thorough understanding of the selector and do not know under what circumstances the selector should be used. This is a headache. For new friends, I would like to give some simple explanations on the CSS selector, I hope it will help you in your learning work.

The correct and concise use of the CSS selector can achieve very good results. We do not need to define a class or ID for each element in the whole article. through appropriate organization, we can achieve the same effect in the simplest way. In practice, the most common selector is the following five types:

I. Tag selector:
The tag selector directly uses HTML tags as selectors, such as HTML tags such as p, h1, dl, and strong.

For example:

P {font: 12px ;}
Em {color: blue ;}
Dl {float: left; margin-top: 10px ;}

Ii. id selector:
We usually define the id for the page element.
For example, <div id = "menubar"> </div> is defined in the style sheet as follows:
# Menubar {
Margin: 0 auto;
Background: # ccc;
Color: # c00;
}
"Menubar" is the custom id name. Add "#" to the front.
The id selector also supports descendant selector,
For example:
# Menubar p {
Text-align: center;
Line-height: 20px;
}
This method is mainly used to define the layer and those elements that are complex and have multiple "unique descendants.

Iii. class selector:
Class selector starts with a vertex in CSS.
For example:
. MainContent {
Color: # f60;
Font-size: 14px;
}
On the page, use the class = "class Name" method to call: <span class = "mainContent"> 14px font size </span> This method is simple and flexible,
You can create and delete pages at any time. However, we need to avoid multi-class syndrome.

4. Group selector:
When the style attributes of several elements are the same, you can call a declaration to separate the elements with commas.
For example:
P, td, li {
Line-height: 20px;
Color: # c00;
}
# Main p, # sider span {
Color: #000;
Line-height: 26px;
}
Using the group selector will greatly reduce the CSS code, and merge the elements with multiple identical attributes into the group for selection,
Defines the same CSS attributes, which greatly improves the encoding efficiency and the size of CSS files.

V. Descendant selector:
The descendant selector is also called a derived 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;
}

# MainContent p {
Color: #000;
Line-height: 26px;
}

6. General selector:

A general selector is represented by an asterisk. A general selector is generally used to apply styles to all elements on a page.

For example, you can use the following rules to delete the default browser padding and blank spaces on each element:

*{

Padding: 0;

Margin: 0;

}

In CSS, four pseudo classes are used to define the link styles, including a: link, a: visited, a: hover, And a: active.
For example:
A: link {font-weight: bold; text-decoration: none; color: # c00 ;}
A: visited {font-weight: bold; text-decoration: none; color: # c30 ;}
A: hover {font-weight: bold; text-decoration: underline; color: # f60 ;}
A: active {font-weight: bold; text-decoration: none; color: # F90 ;}
The preceding statements define the style of "link, accessed link, mouse over, and mouse over.
Note: The data must be written in the above sequence; otherwise, the display may be inconsistent with your expectation. Remember that their order is "LVHA ".