有关 :first-child的理解

最新推荐文章于 2024-04-16 12:23:43 发布

alicaa

最新推荐文章于 2024-04-16 12:23:43 发布

阅读量2.7w

点赞数 19

分类专栏： CSS 文章标签： :first-child css

本文链接：https://blog.csdn.net/weixin_38134581/article/details/83504080

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

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

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

例子来了。

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

问题1

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

</样式>

</ head>
<body>

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

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

</ BODY>

问题2

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元素都改变样式

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的理解，欢迎大家一起讨论和学习。

alicaa

关注

19
点赞
踩
35

收藏

觉得还不错? 一键收藏
1
评论
有关 :first-child的理解

最近在做项目，突然发现一个选择器非常特别，所以特意去了解了一下，下面把我自己所理解的意思写下来。在W3School里面讲：first-child选择器用于选取属于其父元素的首个子元素的指定选择器。我刚一看这个我也是看的迷迷糊糊，这讲的是什么意思，我把他理解成是他的第一个元素。然后就傻傻的的去测试，也不知道自己弄什么。然后出现了一些错误，下面我就一一例举有关：first-child的内...
复制链接

扫一扫