CSS separator description

Source: Internet
Author: User

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.