There are three main application selectors: Element selector, Id selector, and class selector.
There are three types of selectors: descendant, child, and adjacent siblings.
The element selector uses standard element tags in HTML documents as the identifier of the selector. For example:
H1 {color: red; font-size: 14px ;}
Id selector, which uses the unique ID of an element as the selector identifier. For example:
# Red{Color: red ;}# Green{Color: green ;}
Class selector, which uses the element class as the selector identifier. For example:
. Center{Text-align: Center}
From the view of the relationship between selectors:
The combination of descendants means that the two selectors are separated by spaces. For example, "a B" indicates the selected elements of B contained in the selected elements of. For example:
. Fancy TD{Color: # f60; Background: #666 ;}
In the preceding example, the elements of the fancy class contain the TD element. Note: This inclusion is not necessarily included in adjacent child generations. It can be included in the sun generation, so that the names of child generations are combined.
Child element combination. Two selectors are separated by ">. For example, "A> B" indicates the elements selected by B in the adjacent child element of the selected element of. For example:
H1>Strong {color: red ;}
<H1> This is <strong> very </strong> important.
In the preceding example, the style is applied in the first sentence, but not in the second sentence. In the second sentence, H1 and strong are not adjacent child elements.
Adjacent brothers are combined. The two selectors are separated by "+. For example, "A + B" indicates that A and B are adjacent elements and have the same parent element, that is, they are brother elements. The selector selects the B element.
<! Doctype HTML>
<HTML>
<Head>
<Style type = "text/CSS">
H1 + P {margin-top: 50px ;}
</Style>
</Head><Body>
<H1> This is a heading. <P> This is paragraph. </P>
<P> This is paragraph. </P>
</Body>
</Html>
In the above example, the second P element does not apply the style, but the first application.
Knowing the selector type and the combination of the selector will create many magical applications. For example:
HTML> body table + ul {margin-top: 20px ;}
This selector is interpreted as: select all the sibling ul elements that appear next to the table element. The table element is contained in a body element, and the body element itself is a child element of the HTML element.
From: http://blog.csdn.net/huangxy10/article/details/8174880
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
