二、css3新增内容

css3之前选择器

1. 通配符选择器 *选择器

2.ID选择器

3.class类选择器

4.标签选择器（元素选择器）

5.组合选择器 #box1,#box2{}(同时选择到box1和box2)

6.后代选择器 ul li(选择到ul下面的li)

7.子代选择器 ul>li(选择到ul的亲儿子li)

8.毗邻选择器 div+p（选择到div紧邻的兄弟p）

9.属性选择器 div[class="box1"]

10.伪类选择器 a:after a:before a:hover

css3新增选择器

1.E1~E2 关联选择器 选择E1后面的兄弟E2（和我们之前的毗邻选择器区别就在这里）

属性选择器新增

2. [attr^=" " ] 以“”中内容开头

3. [attr$=" " ] 以“”中内容结束

4. [attr*=" " ] 包含“”中内容都可以

伪类新增
下面是有of和type是在p当中选p

5. p:first-of-type 选择到p，p必须为他们各自父级所有子元素为p的第一个p

6. p:last-of-type 选择到p，p必须为他们各自父级所有子元素为p的最后一个p

7. p:only-of-type 选择到p，p必须为他们各自父级所有子元素为p的唯一一个p

8. p:nth-of-type(n) 选择到p, p必须为父级所有子元素为p的第n个p

9. p:nth-last-of-type(n) 选择到p, p必须为父级所有子元素为p的d倒数第n个p

下面是没有of的，是在子元素中选p

10.p:only-child 选择p,p必须为他们各自父级的唯一一个子元素

11.p:last-child 选择p,p必须为他们各自父级的最后一个子元素

12.p:nth-child(n) 选择p,p必须为他们各自父级的第n个子元素

13.p:nth-last-child(n) 选择p,p必须为他们各自父级的倒数第n个子元素

14.p:not(.c1) 选择到p，除了类名叫做c1的p

15.p:empty 选择到p，没有内容的p

15.p:target 选择到p，被锚点激活的p

16 p::selection 被用户选中的p

关于输入框

17 input:disabled 选中不可用的input输入框

18 input:enabled 选中可用的input输入框

19 input:checked 选中被选中的input输入框

具体使用代码：

    

      

      

      

      

      

    
    

      

      

      

    
    

      

      
1
      
2
      
3
    
    

      

      

      
      
      
    
    

      

      
1
      
2
      

      
3
      
4

      
      
    
    

      
      

    
    

      

      
1
      
2
      
    
    

      

      
1
      
2
      

    
    

      
1
      
2
      
3
    
    

      
1
      

      

    
    

      点我试试1
      

      点我试试2
      

    
    

      兰亭集序，小阳老师！
    
    

      迷途的羔羊：  

      大白：
    
    

      苹果
      香蕉
      梨子
      橘子