:first-child&&:first-of-type

:first-child伪类表示父元素的第一个子元素。
例如：li:first-child{color:yellow}
表示父元素的第一个子元素是li的每一个颜色是黄色。

        
ff
        
dd
    
    

        
This text will be orange.
        
Lorem ipsum dolor sit amet. This text will be orange.
        
Lorem ipsum dolor sit amet.
    

:first-of-type表示在：前的该容器下，所有父元素的第一个元素。
例如ul :first-of-type{color:yellow}（ul 空格:first-of-type{color:yellow}）表示在ul这个容器下，所有父元素的第一个子元素颜色是黄的，同理适用于first-child

ul :first-of-type{color:yellow}

        
This text will be orange.
        
Lorem ipsum dolor sit amet. This text will be orange.
        
Lorem ipsum dolor sit amet.
    

当没有空格时，ul:first-of-type{color:yellow},表示的是选择在父元素中第一个出现的ul，不管其在兄弟的那个地方

ul:first-of-type{color:yellow}

另外关于nth-child和nth-of-type

    
我是第1个p标签
    
我是第2个p标签
  



p:nth-child(2) { color: red; }

p:nth-of-type(2) { color: red; }

对于:nth-child选择器，在简单白话文中，意味着选择一个元素如果：

这是个段落元素
这是父标签的第二个孩子元素

对于:nth-of-type选择器，意味着选择一个元素如果：

选择父标签的第二个段落子元素

同样适用于first-child和first-of-type
注意～odd表示奇数,even表示偶数，从1开始计算，不是从零开始。