CSS选择器之first-of-type 和 first-child 比较

一、概念

  A>B : first-child ：  父元素下的第一个子元素

        为A标签的第一个孩子（first-child）B设置样式，若A标签的第一个孩子是B标签，则设置成功，否则（A的第一个孩子不是B），则失败，即该CSS失效

  A > B:first-of-type： 父元素下的某个类型的第一个子元素

       为A标签的孩子们中，第一个为B标签（B标签是A的孩子，但不一定是A的第一个孩子）设置样式，若A标签的孩子中有B标签，则设置成功，否则（A的孩子中没有B标签），则失败，即改CSS不生效

不同之处：

      first-child强调的是父元素中的第一个元素，并不关心其类型；first-of-type强调的是①必须为子元素②必须是某个类型③第一个

二、代码实践 - 给第一段加上红色背景

1、<p/>标签刚好是<div>中的第一个child

使用first-child：

使用first-of-type：

   

结论：

      当设置标签的类型在父元素中存在，且是父元素中的第一个元素时，first-child和first-of-type效果相同；

2、<p/>标签不是<div>中的第一个child

使用first-child：

分析：

    由于test的第一个child不是<p/>，所以不生效；

使用first-of-type：

分析：

     </p>为test的child，并且“截图中下划线”是test的child的第一个child，所以生效；

结论：

    当<p/>不是<div/>第一个child时，要是想要给<div/>中第一个<p/>设置样式时，必须使用first-of-type

三、总结

  当需要设置元素是父元素的第一个child时，first-of-type 和first-child效果一致；当需要设置元素不是父元素的第一个child时，需要用first-of-type.