结构伪类选择器-CSS3新特性

CSS3新特性-结构伪类选择器

• 在CSS3中新增了一个结构伪类选择器，它能用更加简洁的代码，实现我们的某些需求。

• 定义：结构伪类选择器主要根据的是文档的结构来选择元素，常常用在根据父级选择器选出某些想要的子元素。

• 主要语法如下：

编号	语法	含义
1	E:first-child	匹配父元素中的第一个子元素E
2	E:last-child	匹配父元素中最后一个E元素
3	E:nth-child(n)	匹配父元素中的第n个子元素E
4	E:first-of-type	指定类型E的第一个
5	E:last-of-type	指定类型E的最后一个
6	E:nth-of-type(n)	指定类型E的第n个

• 其中：n可以是数字，关键字和公式。

    1. n如果是数字，就是选择第n个子元素，里面数字从1开始...
    2. n如果是关键字: even代表偶数，odd代表奇数
    3. n可以是公式︰常见的公式如下：
    4. 注意：如果n是公式，则从0开始计算，但是第0个元素或者超出了元素的个数会被忽略
  

公式	选取范围
n	所有子元素
2n	偶数子元素
2n+1	奇数子元素
5n	第5、10、15...个子元素
n+3	从第3个子元素开始（包括第3个）到最后
-n+6	前6个子元素(注意不能写成 6-n 不生效)

一、E:first-child

• 含义：匹配父元素中的第一个子元素E。

• 示例：如下代码会选中ul下的第一个li。

    
  
    
  
        
  我是第1个li
        
  我是第2个li
        
  我是第3个li
        
  我是第4个li
        
  我是第5个li
    
  

• 效果：
  

二、E:last-child

• 含义：匹配父元素中最后一个E元素。

• 示例：如下代码会选中ul下的最后一个li。

    
  
    
  
        
  我是第1个li
        
  我是第2个li
        
  我是第3个li
        
  我是第4个li
        
  我是第5个li
    
  

• 效果：
  

三、E:nth-child(n)

• 含义：匹配父元素中的第n个子元素E。

• 示例1：如下代码会选中ul下的所有li。

    
  
    
  
        
  我是第1个li
        
  我是第2个li
        
  我是第3个li
        
  我是第4个li
        
  我是第5个li
    
  

• 示例2：如下代码会选中ul下的偶数子元素。

    
  
    
  
        
  我是第1个li
        
  我是第2个li
        
  我是第3个li
        
  我是第4个li
        
  我是第5个li
    
  

• 示例3：如下代码会选中ul下的奇数子元素。

    
  
    
  
        
  我是第1个li
        
  我是第2个li
        
  我是第3个li
        
  我是第4个li
        
  我是第5个li
    
  

• 示例4：如下代码会选中ul下5、10、15…的子元素。

    
  
    
  
        
  我是第1个li
        
  我是第2个li
        
  我是第3个li
        
  我是第4个li
        
  我是第5个li
        
  我是第6个li
        
  我是第7个li
        
  我是第8个li
        
  我是第9个li
        
  我是第10个li
        
  我是第11个li
        
  我是第12个li
        
  我是第13个li
        
  我是第14个li
        
  我是第15个li
        
  我是第16个li
        
  我是第17个li
        
  我是第18个li
        
  我是第19个li
        
  我是第20个li
    
  

• 示例5：如下代码会选中ul下的第3个子元素到最后。

    
  
    
  
        
  我是第1个li
        
  我是第2个li
        
  我是第3个li
        
  我是第4个li
        
  我是第5个li
        
  我是第6个li
        
  我是第7个li
        
  我是第8个li
        
  我是第9个li
        
  我是第10个li
    
  

• 示例6：如下代码会选中ul下的前6个子元素(注意：一定不能写成n-6)。

    
  
    
  
        
  我是第1个li
        
  我是第2个li
        
  我是第3个li
        
  我是第4个li
        
  我是第5个li
        
  我是第6个li
        
  我是第7个li
        
  我是第8个li
        
  我是第9个li
        
  我是第10个li
    
  

四、E:first-of-type

• 含义：指定类型E的第一个。

• 示例：如下代码会选中ul标签下的第一个li标签。

    
  
    
  
        
  我是第1个p标签
        
  我是第2个p标签
        我是第1个a标签
        我是第2个a标签
        
  我是第1个li
        
  我是第2个li
        
  我是第3个li
        
  我是第4个li
        
  我是第5个li
    
  

五、E:last-of-type

• 含义：指定类型E的最后一个。

• 示例：如下代码会选中ul标签下的第一个li标签。

    
  
    
  
        
  我是第1个p标签
        
  我是第2个p标签
        我是第1个a标签
        我是第2个a标签
        
  我是第1个li
        
  我是第2个li
        
  我是第3个li
        
  我是第4个li
        
  我是第5个li
    
  

六、E:nth-of-type(n)

• 含义：指定类型E的第n个。

• 用法：nth-of-type(n)的用法和nth-child(n)的用法类似，只不过nth-of-type(n)会在指定类型的条件下选择子元素，其中n的取值和nth-child(n)中n的取值用法一模一样。

• 示例1 ： 如下代码会选中ul下第2个li标签。

    
  
    
  
        
  我是第1个p标签
        
  我是第2个p标签
        我是第1个a标签
        我是第2个a标签
        
  我是第1个li
        
  我是第2个li
        
  我是第3个li
        
  我是第4个li
        
  我是第5个li
    
  

注意：如下写法是错误的！！！

• 想选择ul下的第一个li元素：

    ul li:first-child {
    	background-color: green;
    }
  

• 这种写法什么都不会选出来，因为ul标签下的第一个子元素是p,不是li,所以不会有元素被选出来。逻辑来说的话就是：它会先找到ul下的第一个子元素，然后去和li比较，发现标签类型不符合，所以就不会选择

---

	ul li:first-of-type {
		background-color: green;
	}

• 这种写法会将第一个li选出来，从逻辑上来说：它会先找到ul下面的li元素然后再去找第一个元素