子节点选择器

:nth-of-type() && :nth-child()

• :nth-of-type(n) 匹配父节点下同一级对应标签的第n个节点 (:nth-last-of-type(n)反序)
• :nth-child(n) 匹配父节点下同一级第n个子节点且子节点为对应标签(:nth-last-child(n)反序)
• 值得注意的是：:nth-如添加了类名限制,查找时子节点的顺序n不受类名限制影响，但查找到的结果受类名限制。

:nth-of-type() && :nth-child()区别

    
  
     
第1-1个p元素
  
     
    
      
第2-1个p元素
    
      
       第2-1个section元素
      
    
      
第2-2个p元素
    
      
第2-3个p元素
  
     
  
     
      第1-2个section元素
     
  
     
      第1-3个section元素
     
  
     
      第1-4个section元素
     
  
     
第1-2个p元素
  
     
第1-3个p元素
    

section > p, section > section {  padding-left: 30px;}p:nth-of-type(2){   color: red;}p:nth-child(2){  background: red;}p.info:nth-of-type(2){    }

结果：p:nth-child(2) 无效

p:nth-of-type(2): 匹配父节点下的第二个是p的子节点

p:nth-child(2)： 匹配父节点下第二个子节点同时第二个子节点为p

注意点

    
    
     
1
    
     
      
      
       2-1
      
      
      
       2-2
      
    
     
    
     
3
    
     
4
    
     
5
    

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

效果：类名顺序失效, 匹配每一级同一个类型的第二个标签且类名为foo的。

满足:nth-of-type(2)结果的为<div class="foo">2-2</div>和<p>3</p>，但是<p>3</p>不匹配类名为foo，所以最后匹配结果为<div class="foo">2-2</div>

    
  
     
1
  
     
    
      
       2-1
      
    
      
       2-2
      
    
      
       2-3
      
  
     
  
     
3
  
     
4
  
     
5
    

p.foo:nth-of-type(3) {  color: red;}

结果：类名顺序失效, 匹配每一级第三个p标签且p标签类名为foo的。

div>p

匹配所有父级是<div>的<p>元素

兄弟节点选择器

div+p

匹配所有紧接着<div>元素之后的<p>元素