The pits that have trodden in those years: First-child pseudo class Selector

Original: The pits that have been trodden on for years: First-child Pseudo class Selector

: The First-child selector is used to select the specified selector that belongs to the first child element of its parent element. --w3school

Well, at first glance it doesn't seem to be clear, so the selector is misleading and there are usually two misconceptions:
misunderstanding one : Think E:first-child Select the first child element of the E element.
Myth two : Think e:first-child the first e element of the parent element of the e element is selected.

Have you ever understood this selector or still understand it this way? Both of these understandings are wrong, in order to prove that the above two understandings are wrong, look at the following example

<!--misunderstanding a--><style>div:first-child {color: red;} </style><div class= "Demo" ><a> a link </a><a> a link </a><a> a link </a> <a> a link </a></div>

The effect is this:

Obviously, according to the first understanding, only the first a element of the font color turns red, but in fact it all turns red.

<!--misunderstanding two--><style>div a:first-child {color: red;} </style><div class= "Demo" ><p> a paragraph </p><a> a link </a><a> a link </a> <a> a link </a><a> a link </a></div>

The effect is this:

According to the second understanding, the first element of a in div should be red, and it turns out that this understanding is also wrong.

OK, the correct understanding should be: as long as the e element is its parent's first child element, it is selected. It needs to satisfy two conditions at the same time, one is "the first child element" and the other is "This child element is just e".

<style>span:first-child{Color:Red;}P:first-child{Color:Blue;}/*The first child element of the parent element of the P element is a div, not a P element, so the style does not work*/I:first-child{Color:Orange;}</style><div class= The first child element of the "demo" ><div>.demo is div</div><!-- The first SPAN element is the first span of its parent p element, the color becomes red-<p><span> first span</span> the first paragraph p<span> the second span </span></p><!--The first I element is the first I of its parent a element, the color turns orange--<p> a link <i> the first I element </i> </p><!--The second I element is the first I of its parent a element, the color turns orange--<p> a link <i> the second I element </i></p><p > A link </p></div>

Effect:

Similar to the easily misunderstood structure selector: Nth-child (),: Nth-last-child,: Only-child, in peacetime development needs to pay attention.

By: Wang Meijian from:http://www.cnblogs.com/wangmeijian/

The pits that have trodden in those years: First-child pseudo class Selector