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

一个链接
一个链接
一个链接
一个链接

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.

一个段落
一个链接
一个链接
一个链接
一个链接

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:

.demo的第一个子元素是div

第一个span第一个段落P第二个span

一个链接第一个i元素

一个链接第二个i元素
一个链接

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!