徐向博 / Imin.

CSS填坑 -child系列选择器
作者:Imin 时间:2018-05-02 分类: 前端

在CSS2版本中,有 p:first-child这么一个选择器,w3school里解释的是:

选择属于父元素的第一个子元素的每个 <p> 元素。

有点绕,大概的意思是:“选择容器下面子元素的第一个<p>元素”,如下:

<div>
    <p>1</p>
    <p>2</p>
</div>

此时,div p:first-child 选择的是内容为 1 的 p 元素,相对的 div p:last-child 选择最后一个 p 元素,在本例中选择的是内容为 2 的元素。然而这里面有一个坑,在w3school中也没有指出,如下:

<div>
    <span>span</span>
    <p>1</p>
    <p>2</p>
</div>

此时,div p:first-child 无法选择任何元素,原因是 div 容器下,第一个子元素不是 p 元素。由此可见,p:first-child 选择器的概念应该是:

选择属于父元素的子元素的第一个 p 元素,如果第一个子元素不是 p ,那么将不选择任何元素。

在CSS3版本中,新增了 nth-child选择器,用法和 first-child 基本一样:

<div>
    <p>1</p> <!--div p:nth-child(1)-->
    <p>2</p> <!--div p:nth-child(2)-->
</div>

<div>
    <span>span</span> <!--div span:nth-child(1)-->
    <p>1</p> <!--div p:nth-child(1)-->>
    <p>2</p> <!--div p:nth-child(2)-->
</div>

既然说到了 first-child,就不能不提一下 first-of-type,和first-child一样,同样是选择第一个子元素,那么差异在哪?

<div>
    <p>1</p>
    <p>2</p>
</div>

此例中,first-child和first-of-type的效果一致。

<div>
    <span>span</span>
    <p>1</p>
    <p>2</p>
</div>

此例中,p:first-child是无效的选择器,而p:first-of-type将选择内容为 1 的p元素,所以 first-of-type 可以定义为:

选择容器下子元素的 指定类型 的 第一个 元素。

CSS3中的nth-of-type用法基本一致,参见上文的nth-child。


好特易购用胶水就用乐泰胶水和可赛新胶水这才是正确的选择 https://www.hyhaote.com 2018-05-13 15:32
我爱辅助论坛电子邮件地址不会被公开。 必填项已用*标注 2018-05-08 01:08
农业网站导航谢谢分享  最近自己也在研究前端  学习了 2018-05-05 11:24
周松松博客感谢分享!
欢迎加入博客圈站长交流群,群聊号码:571334199
2018-05-02 22:39
残影谢谢分享! 2018-05-02 12:22