首页 > 代码库 > CSS 中first-child和last-child不起作用原因

CSS 中first-child和last-child不起作用原因

今天开发的时候,发现last-child不起作用,看了下原因顺便给自己学习CSS选择器,我们这里举个例子,如下代码:
<div>
<h1>title</h1> <p>words</p>
<p>words</p>
<p>words</p>
</div>
当我们想获取第一个p标签并给它加粗时,如果采用以下写法:

div p:first-last{font-weight:blod}

这时候我们会发现不起作用。这时候我们应该采用
div p:first-of-type{font-weight:blod}
这时候调试下就没问题了。
这里我们要理解下:first-child和:first-of-type 区别:
:first-child  指的是父元素的第一个子元素,例如我们本例子中要使用first-child实现的话,必须把h1标签去掉保证没有兄弟元素,或者单独把P标签包围起来;

:first-of-type 指的是父元素下相同类型子元素中的第一个,比如我们例子中的第一个p标签。

以此类推,选择器 :last-child  和 :last-of-type、:nth-child(n)  和  :nth-of-type(n) 也是同样道理的。




CSS 中first-child和last-child不起作用原因