1. Type Selector
Body
{
Font-size: 12px;
}
{
Color: blue;
}
Indicates the selection of the existing tag type in the webpage as the name. The above indicates that the size of all text in the body tag is 12px, and the text color in the paragraph is blue.
2. group selection operator
H4, p, span
{
Font-size: 12px;
}
It indicates that the text in all h4, p, and span labels on the page is 12 PX, that is, the same style is specified for a group of objects, and each label is separated by commas.
3. Include Selector
Div p
{
Font-weight: bold;
}
It indicates that the text in the p label in the div label is in bold. This is a type of inclusion relationship. Each label is separated by a space and can contain multiple levels.
Iv. id and class selector
Id is the unique element of the page for style definition, this style is only used once in the page, that is, the id is not repeated
<Div id = "myDiv">
..
</Div>
# MyDiv
{
Font-size: 12px;
}
A class defines a general or frequently used style. A style needs to appear on a page multiple times to specify the same class for different labels, as shown below: the font in the div and p labels is blue.
<Div class = "red">
</Div>
<P class = "red">... </p>
. Red
{
Color: blue;
}
5. Combined Selector
Use id or class, and also use tags for Combination
H1 # cont
{
}
H1 label with id cont
H1. cont
{
}
Indicates that all h1 labels whose class is cont
6. Pseudo-class selector
A label is commonly used.
A: link
{
}
A: hover
{
}
A: visited
{
}
7. wildcard character selection
*
{
Color: blue;
}
The font of all objects is blue.