CSS3 's First-child selector combat code

This article mainly introduces the CSS3 of the First-child selector, including First-child and: the difference between first-of-child and for IE compatibility problems, the need for friends can refer to the next

CSS: First-child Selector can select the first set of objects to a specific element (the same parent)
Html

<ul>    <li>1</li>    <li>2</li>    <li>3</li></ul>

Css

Apply only the Li   li:first-child {       color:green, number 1;   }

First-child and: The difference between first-of-child
If we have such a piece of HTML code:

<p>    <p> 1th element </p>    

CSS selector:
We want to find the elements, if we use the following definition method--
P:first-child matches the P element, because the P element is the first child of P;
H1:first-child does not match any element, because here H1 is the second child element of P, not the first one;
Span:first-child does not match any element, because here two span elements are not the first child elements of P;
: First-child matches the P element, because the first child element of P is p.
The above applied style, there are two are not match, but don't panic, CSS also defined: First-of-child pseudo-class, see his usage and explanation:
P:first-of-type matches the P element, because P is the first of all of P's child elements, and in fact there is only one child element of P;
H1:first-of-type matches the H1 element, because H1 is the first of all of P's child elements of H1, and in fact there is only one child element for H1;
Span:first-of-type matches the third child element span. Here P has two sub-elements of span, matching to the first one.
: The First-of-type matches the P element
Summarize:
: First-child matches the first child element of a parent element, which can be said to be the first child of a structure.
: First-of-type matches the first of the type, what is the type, which is what the colon precedes, such as P:first-of-type, which refers to the first of all P elements. There is no longer a limit to the first child element, as long as it is the first of the elements of the type, of course, the scope of these elements belong to the same level, that is, peers.
The same types of selectors: Last-child and: Last-of-type,: Nth-child (N), and: Nth-of-type (n) can also be understood.


compatibility issues with IE
Let's look at the following piece of code, the HTML section:

<ul class= "Example" >    <li>aa</li>    <li>bb</li>    <li>cc</li>    <li>dd</li></ul>

CSS section:

. example li{float:left;margin-left:10px;}

If you need to set the first Li's margin-left to 0px, you can do this in the following way:

. example li{float:left;margin-left:10px;}   . Example li:first-child{margin-left:0;}

However, IE6 does not support: The Child-first method, so we need to use an expression that is never implemented IE6 also supports: Child-first, the code is as follows:

. example Li{float:left; margin-left:10px; _margin-left:expression (this.previoussibling==null? ') 0px ': ' 10px ');}   . Example li:first-child{margin-left:0;}

 Of course, we can also add a class to the first Li to redefine the margin-left, if it is a static page to do so, if the program needs to loop the output of Li, the use of Child-first will be better, at least to make the program less a judge.