三十九、CSS3的新特性（上）

一、CSS3的新特性

1.1、CSS的现状

• 新增的CSS3特性有兼容性问题，ie9+才支持。
• 移动端支持优于PC端。
• 不断改进中。
• 应用相对广泛
• 现阶段主要学习：和以及
  CSS3新增选择器
  CSS3给我们新增了选择器，可以更加便捷，更加自由的选择目标元素。

1. 属性选择器
2. 结构伪类选择器
3. 伪元素选择器

1.2 属性选择器

属性选择器可以根据元素特定属性来选择元素。这样就可以不用借助于类或者id选择器。

选择符	简介
E[att]	选择具有att属性的E元素
E[att="val"]	选择具有att属性且属性值等于val的E元素
E[att^="val"]	匹配具有att属性且值以val开头的E元素
E[att$="val"]	匹配具有att属性且值以val结尾的E元素
E[att*="val"]	匹配具有att属性且值中含有val的E元素

    
    
    
    
    


    
    
    
    
    
    
    
小图标1
    
小图标2
    
小图标3
    
小图标4
    
我是打酱油的
    
    
我是安其拉
    
我是哥斯拉
    
哪我是谁

image.png

1.3、结构伪类选择器

结构伪类选择器主要根据来选择元素，常用于根据父级选择器里面的子元素

选择符	简介
E:first-child	匹配父元素中的第一个子元素E
E:last-child	匹配父元素中的最后一个E元素
E:nth-child(n)	匹配父元素中的第n个子元素E
E:first-of-type	指定类型E的第一个
E:last-of-type	指定类型E的最后一个
E:nth-of-type(n)	指定类型E的第n个

• 1. 

nth-child(n)选择某个父元素的一个或多个特定的子元素

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

公式	取值
2n	偶数
2n+1	奇数
5n	5 10 15 ...
n+5	从第5个开始(包含第五个)到最后
-n+5	前5个(包含第5个)...

    
    
    
    
    


    

        
我是第1个孩子
        
我是第2个孩子
        
我是第3个孩子
        
我是第4个孩子
        
我是第5个孩子
        
我是第6个孩子
        
我是第7个孩子
        
我是第8个孩子
    

image.png

    
    
    
    
    



    

        
我是第1个孩子
        
我是第2个孩子
        
我是第3个孩子
        
我是第4个孩子
        
我是第5个孩子
        
我是第6个孩子
        
我是第7个孩子
        
我是第8个孩子
    
    

        
我是第1个孩子
        
我是第2个孩子
        
我是第3个孩子
        
我是第4个孩子
        
我是第5个孩子
        
我是第6个孩子
        
我是第7个孩子
        
我是第8个孩子
    

image.png

    
    
    
    
    



    

        
我是第1个孩子
        
我是第2个孩子
        
我是第3个孩子
        
我是第4个孩子
        
我是第5个孩子
        
我是第6个孩子
        
我是第7个孩子
        
我是第8个孩子
    
    
    

        
光头强
        
熊大
        
熊二
    

image.png

二、总结

• 结构伪类选择器一般用于选择父级里面的第几个孩子
• nth-child 对父元素里面所有孩子排序选择（序号是固定的）先找到第n个孩子，然后看看是否和E匹配。
• nth-of-type 对父元素里面指定子元素进行排序选择。先去匹配E，然后再根据E找第n个孩子。
• 关于nth-child(n)我们要知道n是从0开始计算的，要记住常用的公式。
• 如果是无序列表，我们肯定用nth-child更多。
• 类选择器、属性选择器、伪类选择器，权重为10。