What is the role of css :first-child?

In CSS, the function of the :first-child selector is: to match the first child element in its parent element, the syntax is "E:first-child{css code}"; this selector needs to be It only works when two conditions are met, one is "the first child element" and the other is "this child element happens to be E".

In css, the :first-child selector matches the first child element in its parent element, if the first element of the parent element is not the one it is looking for elements, it will not work. (Recommended tutorial: CSS video tutorial)

This selector is easily misunderstood, and there are usually two misunderstandings:

• Misunderstanding 1 : It is considered that E:first-child selects the first child element of the E element.

• Misunderstanding 2: It is believed that E:first-child selects the first E element of the parent element of the E element.

The above two understandings are wrong. In order to prove that the above two understandings are wrong, take a look at the following example

<!-- 误解一 -->
<style>
div:first-child{color: red;}
</style>

<div class="demo">
<a>一个链接</a>
<a>一个链接</a>
<a>一个链接</a>
<a>一个链接</a>
</div>

The effect is like this:

Obviously, according to the first understanding, only the font color of the first a element should turn red, but in fact all of them turn red.

<!-- 误解二 -->
<style>
div a:first-child{color: red;}
</style>

<div class="demo">
<p>一个段落</p>
<a>一个链接</a>
<a>一个链接</a>
<a>一个链接</a>
<a>一个链接</a>
</div>

The effect is like this:

According to the second understanding, the font of the first a element in the div should be red. Facts have proved that this This understanding is also wrong.

OK, the correct understanding should be: As long as the E element is the first child element of its parent, will be selected. It needs to meet two conditions at the same time, one is "the first child element" and the other is "this child element happens to be E".

Look at the correct example below:

<style>
span:first-child{color: red;}
/*p元素的父元素的第一个子元素是div而不是p元素，因此该样式不起作用*/
p:first-child{color: blue;} 
i:first-child{color: orange;}
</style>

<div class="demo">
<div>.demo的第一个子元素是div</div>
<!--第一个span元素是它的父级P元素的第一个span，颜色变红色-->
<p><span>第一个span</span>第一个段落P<span>第二个span</span></p>
<!--第一个i元素是它的父级a元素的第一个i，颜色变橙色-->
<p>一个链接<i>第一个i元素</i></p>
<!--第二个i元素是它的父级a元素的第一个i，颜色变橙色-->
<p>一个链接<i>第二个i元素</i></p>
<p>一个链接</p>
</div>

Effect:

Programming getting Started! !

The above is the detailed content of What is the role of css :first-child?. For more information, please follow other related articles on the PHP Chinese website!