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

今天开发的时候，发现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) 也是同样道理的。

转载于:https://www.cnblogs.com/christong/p/6930258.html