最近在做项目,突然发现一个选择器非常特别,所以特意去了解了一下,下面把我自己所理解的意思写下来。
在W3School里面讲 :first-child选择器用于选取属于其父元素的首个子元素的指定选择器。
我刚一看这个我也是看的迷迷糊糊,这讲的是什么意思,我把他理解成是他的第一个元素。然后就傻傻的的去测试,也不知道自己弄什么。然后出现了一些错误,下面我就一一例举有关:first-child的内容出来。
例子来了。
<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>
<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>
<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的理解,欢迎大家一起讨论和学习。