The most common CSS selectors in the design

First, Tag selector:
As implies, tag selectors are HTML tags that directly use HTML tags as selectors, such as P, H1, DL, strong, and so on.

Such as:

p {font:12px;}
em {color:blue;}
DL {float:left; margin-top:10px;}

Second, ID selector:
We usually define the ID for the page element.
such as <divid= "menubar" ></div>, and then defined in the style table:
#menubar {
margin:0 Auto;
Background: #ccc;
Color: #c00;
}
where "menubar" is the ID name that is defined by itself. Note the "#" number in front.
The ID selector also supports descendant selectors,
For example:
#menubar p {
Text-align:center;
line-height:20px;
}
This method is primarily used to define layers and elements that are more complex and have multiple "unique descendants".

third, class (Class) selector:
In CSS, the category selector is represented by a dot.
For example:
. maincontent {
Color: #f60;
font-size:14px;
}
In the page, with class= "category name" method call: <spanclass= "maincontent" >14px size of the font can be created and deleted at any time according to the page needs. But multiple class syndrome needs to be avoided.

Four, group selector:
When several element style attributes are the same, a declaration can be called together, separating the elements with commas.
Such as:
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, will have multiple elements of the same attributes, merge groups to select,
The same CSS properties are defined, which greatly improves the encoding efficiency and the size of the CSS file.

v. Descendant selector:
Descendant selectors are also called derived selectors. You can use the descendant selector to define a style for child elements in an element,

For example:

Li Strong {
Font-style:italic;
font-weight:800;
Color: #f00;
}

#mainContent p {
Color: #000;
line-height:26px;
}

Vi. Universal Selector:

The universal selector is represented by an asterisk. Generic selectors are typically used to apply styles to all elements on a page.

For example, you can use the following rules to remove the default browser padding and whitespace on each element:

* {

padding:0;

margin:0;

}

CSS uses four pseudo-classes to define the style of the links, A:link, a:visited, A:hover, and a:active, respectively.
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 above statements define the styles of links, visited links, mouse over, mouse down, respectively.
Note that you must write in the order above, otherwise the display may be inconsistent with your expectations. Remember that their order is "LVHA".

The most common CSS selectors in the design