first-child、last-child

很多人对last-child和first-child选择器有着很深的误会,以为匹配的是“所有符合匹配规则(:之前)的平级元素中的第一\最后一个”。
实际上fitst-child、last-child的匹配规则是这样的:

  1. 找到符合:之前选择器匹配规则的元素
  2. 找到元素的全部平级元素中的第一个或最后一个
  3. 判断第一个或最后一个元素时候符合:之前选择器的匹配规则
这样解释有些难懂,所以举例如下:
div1p1
p2
div2p:first-child { 什么也没有匹配到,因为p1不是first-child,div1又不是p元素 } p:last-child { 什么也没有匹配到,与p:first-child一个道理 } .div:first-child { 匹配到div1 } .div:last-child { 匹配到div2 }

【first-child、last-child】线上例子:https://jsfiddle.net/ndNovaDev/7j151x6x/4/

    推荐阅读