深入理解css3伪类选择器

• E:nth-of-type(n)
  表示E的父元素中，第n个类型为E的子节点。而不管其在兄弟内的位置如何。注意措辞跟nth-child的区别，这也是理解两者的关键。

• E:nth-last-of-type(n)
  表示从后往前计算，E的父元素中，第n个类型为E的子节点，而不管其在兄弟内的位置如何

• 自己可以写一些例子来帮组理解

参考链接：https://developer.mozilla.org/zh-CN/docs/Web/CSS/:nth-of-type

    
        
        
        
    
    
        
1
        
2
        
3
        
4
        
5
        
6
        
7
        
8
        
9
        
10
    

• E:nth-child(n)
  表示E父元素中的第n个子节点，且类型为E。必须同时满足这两个条件，才能被选中。对比nth-of-type是严格匹配。

    p:nth-child(odd){background:red}/*匹配奇数行*/
    p:nth-child(even){background:red}/*匹配偶数行*/

• E:nth-last-child(n)
  表示从后往前计算，E父元素中的第n个子节点，且类型为E，必须同时满足这两个条件，才能被选中。

可以参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/:nth-child

• E: first-child
  表示一组兄弟元素中的第一个子节点，且类型是E。必须满足这两个条件，才能匹配成功。

可以参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/:first-child

• E:last-child
  与:first-child相反，表示一组兄弟元素中的最后一个子节点，且类型是E。必须满足这两个条件，才能匹配成功。

可以参考： https://developer.mozilla.org/zh-CN/docs/Web/CSS/:last-child

• E:first-of-type
  表示E父元素中，第一个出现的E类型的节点，而不管其在兄弟内的位置如何

可以参考： https://developer.mozilla.org/zh-CN/docs/Web/CSS/:first-of-type

• E:last-of-type
  表示E父元素中，最后一个出现的E类型的节点，而不管其在兄弟内的位置如何

可以参考： https://developer.mozilla.org/zh-CN/docs/Web/CSS/:last-of-type

• E:only-child
  表示E的父元素中，只有E一个子元素。注意：子节点不包含文本节点

可以参考 ：https://developer.mozilla.org/zh-CN/docs/Web/CSS/:only-child

• E:only-of-type
  表示了E类型元素没有其他相同类型的兄弟元素，也可以直接这么用:only-of-type 代表了任意一个元素，这个元素没有其他相同类型的兄弟元素。

可以参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/:only-of-type

可以配合代码来理解以上内容，根据理解，灵活的编写例子：

    
        
        
        
    
    
        

            
            
        
        
2
        
3
        
4
        
5
        
6
        
7
        
8
        
9
        
10