容易误解的前端知识汇总（笔记中）

一.容易误解的CSS知识

1.first-child、last-child，选中第一个或最后一个元素，注意官方称父元素的第一个...，这个意味着着即便你加上“a”、“.样式”这样的选择器，他依然不理不睬。效果如下：

我们使用这个css选中最后一个a

#div1 p:last-child{background:#f00;}

元素结构如下

<div id=div1><p>第一个段落。</p><p>第二个段落。</p><p>第三个段落。</p><p>第四个段落。</p><p>选我p</p><a>选我a</a></div>

你会发现并非如愿，p和a在一个父亲元素下方，所以last-child会选择最后一个儿子a，而非p。

所以以后使用时就无需画蛇添足的为:last-child前加上限制性的名称了，直接#div1 :last-child{background:#f00}就得了！除非你需要确定如果最后一个元素为p才使用样式，如果不是p则不显示样式，那么可以加上p或其他限制。

如果不得不获取第几个，可以使用:nth-last-child(倒数第几个)、 nth-last-type-of(dom)、p:nth-last-child(3n+0)、p:nth-last-child(odd)、p:nth-last-child(even)。

2.