Home > Developer > CSS

Basic CSS selector, composite selector, descendant Selector

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞
There are three basic CSS selectors: Tag selector, category selector, and Id selector.
1. Tag Selector
The names of each HTML tag can be used as the names of the corresponding tag selector, such as H1, P, and so on.
2. CATEGORY Selector
The name of the category selector can be customized by the user.
Format:. Class {color: green; font-size: 20px ;}
3. Id Selector
Test with category Selector
Format: # ID {color: green; font-size: 20px ;}

Compound selector: it is a selector connected by two or more basic selectors in different ways.
There are two cases: "intersection" selector and "Union set" Selector
1. "Intersection" selector: directly connected by two selectors. The result is the intersection of the selected element ranges. The first must be the tag selector, and the second must be the category selector or ID selector, there must be no space between two selectors and continuous writing is required.
For example, h3.class {color: red; font-size: 23px ;}

2. "Union set" selector: select the range selected by each basic selector at the same time. You can select any type of selector. The Union set selector is composed of multiple selectors connected by commas,
Format: H1, H2, H3 {color: red; font-size: 23px ;}

Descendant selector:
Descendant selector writing method: the outer mark is written in front, and the inner mark is written in the back, separated by spaces. When the mark is nested, the inner Mark becomes the descendant of the outer mark.
Give a column <HTML>
<Head>
<Title> descendant selector </title>
<Style type = "text/CSS">
P span {}{
Color: red
}
Span
{}{
Color: blue;
}
</Style>
</Head>
<Body>
<P> nested <span> </P> <span> flag outside of nesting </span> is invalid.
</Body>
</Html>

The effect is: "Use CSS" to display red, others are blue surrounded by <span>
The influence of the descendant selector is not limited to the "direct descendant" of the element, but also affects its "descendants at all levels"
Sub-selector: only the selector that has an influence on the direct descendant, but does not play a role on the "grandson" and the descendant of individual layers.
Format: P> span {color: Blue ;}

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More