有关 :first-child的理解

xiaoxiao2025-04-12  21

最近在做项目,突然发现一个选择器非常特别,所以特意去了解了一下,下面把我自己所理解的意思写下来。

在W3School里面讲   :first-child选择器用于选取属于其父元素的首个子元素的指定选择器。

我刚一看这个我也是看的迷迷糊糊,这讲的是什么意思,我把他理解成是他的第一个元素。然后就傻傻的的去测试,也不知道自己弄什么。然后出现了一些错误,下面我就一一例举有关:first-child的内容出来。

例子来了。

例如:a:first-child {color:yellow;}意思是在父类里面的第一个元素a颜色都是黄

问题1

<style type =“text / css”>

a:第一个孩子{color:yellow;}

</样式>

</ head> <body>

/ *在这里a是他父类p的第一个元素,所以字体颜色改变* / <p>

<a>一个链接</a> <a>一个链接</a> <a>一个链接</a> <a>一个链接</a> </ p> / *在这里a是他父类div的第一个元素,所以字体颜色改变* / <div>

<a>一个链接</a> <a>一个链接</a> <a>一个链接</a> <a>一个链接</a> </ div>

</ BODY>

问题2

<style type =“text / css”>

 div:first-child {color:red;} / * 由于div不是父类body的第一个元素所以他的样式没有显示出来 * /

</ style> </ head> <body>

/ * p:我才是身体的第一个元素* / <p> <a>一个链接</a> <a>一个链接</a> <a>一个链接</a> <a>一个链接</a> </ p> <div> <a>一个链接</a> <a>一个链接</a> <a>一个链接</a> <a>一个链接</a> </ div >

</ BODY>

例如:p> a:first-child span {color:yellow;}意思是父类p第一个a元素里面的所有span元素都改变样式

<style type =“text / css”>

p> a:first-child span {color:yellow;} / *父类p第一个a元素里面的所有span元素都改变样式* /

</style> </head> <body> <p> <a>测试1<span>一个链接</span>测试11<span>一个链接二</span></a></br> <a>测试2<span>一个链接</span>测试22<span>一个链接二二</span></a></br> <a>测试3<span>一个链接</span>测试33<span>一个链接二二二</span></a></br> <a>测试4<span>一个链接</span>测试44<span>一个链接二二二二</span></a></br> </p>

<div> <a>测试1 <span>一个链接</ span>测试11 <span>一个链接二</ br> </a> </ br> <a>测试2 <span>一个链接</ span >测试22 <span>一个链接二二</ br> </a> </ br> <a>测试3 <span>一个链接</ span>测试33 <span>一个链接二二二</ span> </a> </ br> <a>测试4 <span>一个链接</ span>测试44 <span>一个链接二二二二</ br> </a> </ br> </ div>

</ BODY>

上面是我对于:first-child的理解,欢迎大家一起讨论和学习。

 

 

转载请注明原文地址: https://www.6miu.com/read-5028064.html

最新回复(0)