CSS3选择器再CSS2.1选择器的基础上增加了属性选择器、伪类选择器、过滤选择器，减少了对HTML类名或ID名的依赖，避免了对HTML结构的干扰，让编写代码更加轻松。

1，基本选择器

（1）标签选择器(类型选择器)

            统一定义常用标签的基本样式。

?



    
    
    


山下兰芽短浸溪，松间沙路净无泥。


 
         
 
?

（2）类选择器

类选择器能为相同对象定义不同的样式，为不同的对象定义相同的样式，以“.”前缀开头，然后接一个自定义的类名，例如：.myfont。

       
    
        
    


william
山下兰芽短浸溪，松间沙路净无泥。
几处早莺争暖树，谁家新燕啄春泥。
随意春芳歌，王孙自可留。

（3）ID选择器

ID选择器以“#”开头，然后接一个自定义的ID名。HTML所有的标签都支持ID选择器，只要在标签中定义id属性就行了。ID选择器一般是用来定义HTML框架结构的布局效果，因为元素ID都是唯一的。

       
    
        
    


水面清圆，一一风荷举。

（4）通配选择器（通配符）

如果所有的元素都需要定义相同的样式效果就用通配选择器，通配选择器以“*”表示。

       
    
        
    


山下兰芽短浸溪，松间沙路净无泥。
随意春芳歌，王孙自可留。
水面清圆，一一风荷举。

2，组合选择器

（1）包含选择器

包含选择器通过空格标识符来表示，前面一个选择器表示父节点，而后面的选择器表示子节点。

       
    
        
    



    
李白
    
白居易


    
刘莉
    
李梅梅

 

（2）子选择器

子选择器以“>”表示，子选择器是指定父元素包含下的子元素。

       
    
        
    



    
李白
    
白居易

（3）相邻选择器

相邻选择器通过“+”分隔符进行定义，TA指定的元素关系是兄弟关系。

       
    
        
    



    
李白
    
白居易


    
李清照
    
唐琬

（4）兄弟选择器

兄弟选择器的作用是查找某一个指定元素的后面的所有兄弟结点，以“~”表示。

       
    
        
    



    hello
    
李白
    
白居易
    
白居
    
白易
    
白嵩
    
白豪

（5）分组选择器

分组选择器是以“,”分隔符进行定义。严格的来讲分组选择器不是一种选择器类型，而是一种选择器使用方法。当多个对象定义了相同的样式时，就可以把它们分成一组，这样能够简化代码。

       
    
        
    



    hello
    
李白
    
白居易
    
白居
    白易

3，属性选择器

CSS3在CSS2的基础上新增了3个属性选择器，分别是E[attr^="value"]、E[attr$="value"]、E=[attr*="value"]。三个新增的选择器和已定义的E[attr]、E[attr="value"]、E[attr~="attr"]、E[attr|="value"]共同构成强大的HTML属性过滤器。

       
    
        
    



李白乘舟将欲行
几处早莺争暖树
谁家新燕啄春泥
益州疲敝

月出于东山之上
徘徊于斗牛之间

苟富贵
勿相忘

国破山河在，城春草木深。
感时花溅泪，恨别鸟惊心。
烽火连三月，家书抵万金。
白头搔更短，浑欲不胜簪。

好雨知时节，当春乃发生。
随风潜入夜，润物细无声。
野径云俱黑，江船火独明。
晓看红湿处，花重锦官城。

明月松间照，清泉石上流。
空山新雨后，天气晚来秋。
竹喧归浣女，莲动下渔舟。
随意春芳歌，王孙自可留。

山不在高
有仙则名
水不在深
有龙则灵

4，伪类选择器

伪类选择器包括伪类和伪对象选择器，伪类选择器以“:”作为前缀标识符。冒号前后没有空格，否则将会被视为类选择器。

单纯式用法：div:hover{background-color:red;}

混合式用法：div.selected:hover{background-color:green;}

（1）动态伪类选择器

锚点伪类选择器：E:link（未被访问过） 和 E:visited（已被访问过）。

行为伪类选择器：E:active（点击时）、E：hover（鼠标滑过时）、E：focus（元素获得焦点时）。

        /*链接没被访问时为黑色*/
        .demo a:link{
            color: black;
        }
        /*链接被访问后为灰色*/
        .demo a:visited{
            color: gray;
        }
        /*鼠标放在连接上时显示为蓝色*/
        .demo a:hover{
            color: blue;
        }
        /*鼠标点击时激活链接那一下显示为绿色*/
        .demo a:link{
            color: green;
        }

（2）结构伪类选择器

结构伪类选择器是CSS3新设计的选择器，TA利用HTML的树状结构实现元素选择，可以减少class属性和id属性的定义。

①:first-child:选择一个元素的第一个子元素。（不支持ie6）。

比如我们这里的这个demo，你想让列表中的第一个"li"具有与其他"li"有不同的样式，我们就可以使用:first-child来实现。

.demo li:first-child{border:1px dashed #666666;background-color:lightgray}

②:last-child:选择一个元素的最后一个子元素。

让列表中的最后一个"li"具有与其他"li"有不同的样式。

.demo li:last-child{border:1px dashed #666666;background-color:lightgray}

③:nth-child():选择某个元素的一个或多个特定的子元素。[:nth-child(-3)是错误的写法 ,不支持ie6~ie8 ]。

                        :nth-child(length);/*参数是具体数字*/
            :nth-child(n);/*参数是n,n从0开始计算*/
            :nth-child(n*length)/*n的倍数选择，n从0开始算*/
            :nth-child(n+length);/*选择大于或等于length的元素*/
            :nth-child(-n+length)/*选择小于或等于length的元素*/
            :nth-child(n*length+1);/*表示隔几选一*/
            //上面length为整数，n表示一个从0开始的自然数。

.demo li:nth-child(n){border:1px solid #999999;background-color:lightblue;}
/*n=0;没选中。n=1;选第一个。n=2;选中第二个...*/
.demo li:nth-child(2n){border:1px solid #999999;background-color:lightblue;}
/*选中0，2，4，6，8...*/
.demo li:nth-child(2n-1){border:1px solid #999999;background-color:lightblue;}
/*选中0，1，3，5，7...*/
.demo li:nth-child(n+5){border:1px solid #999999;background-color:lightblue;}
/*选中5，6，7，8，9...*/
.demo li:nth-child(-n+5){border:1px solid #999999;background-color:lightblue;}
/*选中5，4，3，2，1*/
.demo li:nth-child(3n+1){border:1px solid #999999;background-color:lightblue;}
/*选中1，4，7，10...*/

④:nth-last-child():选中某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始计算。(不支持ie6~ie8)。

       
    
        
    



    

        
宋公明
        
李靖宇
        
周伯通
        
法拉第
        
胖大海
        
胖大海
    

※如果元素个数为奇数，TA选中的就是偶数，反之选中的是奇数。

⑤:nth-of-type():选择指定的元素。(不支持ie6~ie8)。

:nth-of-type()的用法和:nth-child的用法是一样的，不同的是:nth-of-type()指定了元素的类型。

⑥:nth-last-of-type():选择指定的元素，从元素的最后一个开始计算。(不支持ie6~ie8)。

:nth-last-of-type()的用法和:nth-last-child()的用法是一样的，不同的是:nth-last-of-type()指定了元素的类型。

⑦:first-of-type:选择一个上级元素下的第一个同类子元素。(不支持ie6~ie8)。

和:first-child类似，不同的是指定了元素的类型，用的不多。

⑧:last-of-type:选择一个上级元素下的最后一个同类子元素。(不支持ie6~ie8)。

和:last-child类似，不同的是指定了元素的类型，用的不多。

⑨:only-child:选择的元素是他的父级元素的唯一子元素。(不支持ie6~ie8)。

⑩:only-of-type:选择一个上级元素的唯一一个同类型的子元素。(不支持ie6~ie8)。

       
    
        
    



    
凌晨梦见脚趾头被人用针扎
    
醒了之后才知道是猫在用爪子挠我
    
夏天就这样结束了


    
迷人的不是那张脸，而是那张脸上的最好看的笑容


    凌晨梦见脚趾头被人用针扎
    
醒了之后才知道是猫在用爪子挠我
    
夏天就这样结束了

Ⅺ:empty:选择的元素里面没有任何内容。(不支持ie6~ie8)。

       
    
        
    


hello

（3）否定伪类选择器(不支持ie6~ie8)。

:not()表示否定伪类选择器，TA可以排除掉特定元素，TA和jQuery中的:not选择器用法一模一样。

       
    
        
    



    

        
can i help you?sir.
        
what f**k is this?
        
sorry!i don`t know
        
it`s look like snake.