关于结构伪类选择器 :nth-child() 和 :nth-of-type()

不知道怎么说，直接看例子 作对比就明白了
:nth-child(n) 从父元素中选取符合条件的子元素，n可以是数字，关键词，公式
:nth-of-type(n) 从父元素中选择符合条件的指定类型的子元素，n可以是数字，关键词，公式

基本代码如下

    
    
     


    
这是h1
    
这是h2
    
这是p1
    
这是p2
    
这是p3
    
这是p4
    span 1
    span 2
    span 3
    span 4
    
div 1
    
div 2
    
div 3
    
div 4
    

六种效果如下：

compare.jpg

1. p:nth-child(-n+3) 选择的是 p 的父元素的前三个元素里面是 p 的元素

2. body p:nth-child(-n+3) 的效果跟 p:nth-child(-n+3) 一样 (即：加不加父元素效果一样)
3. 没有限定条件p的话，选择的是父元素的前三个元素
4. p:nth-child(-n+3) 选择的是 p 的父元素的前三个 p 元素
5. body p:nth-child(-n+3) 的效果跟 p:nth-child(-n+3) 一样
6. body :nth-child(-n+3)的效果是选择body里面所有类型的前三个