CSS3选择器

1　CSS选择器的分类

• 基本选择器
• 层次选择器
• 伪类选择器

1. 动态伪类选择器
2. 目标伪类选择器
3. 语言伪类选择器
4. UI元素状态伪类选择器
5. 结构伪类选择器
6. 否定伪类选择器

• 伪元素
• 属性选择器

2　基本选择器

2.1　语法

选择器	类型	功能描述
*	通配符选择器	选择文档中所有HTML元素
E	元素选择器	选择指定类型的HTML元素
#id	ID选择器	选择指定ID属性值为"id"的任意类型元素
.class	类选择器	选择指定class属性值为"class"的任意类型的任意多个元素
selector1, selectorN	群组选择器	将每一个选择器匹配的元素集合并在一起

2.2　案例

    
    
    


    

        
1
        
2
        
3
        
4
        
5
        
6
        
7
        
8
        
9
        
10
    

2.3　通配符选择器（*）

通配符选择器用来选择所有的元素，当然也可以选择某个元素下的所有元素。

2.4　元素选择器（E）

2.5　ID选择器（#id）

在使用ID选择器之前要在HTML文档中给定的元素设置id属性，id在整个HTML文档中具有唯一性

2.6　类选择器（.class）

类选择器是以独立于文档元素的方式来指定元素样式。使用前需要给需要的元素设置class属性，与ID选择器的不同就是一个文档中可以有多个相同的类名。

在使用多类选择器时，要注意，如果一个多类选择器包含的类名中其中一个不存在，这个选择器讲无法找到相匹配的元素

由于类名在一个HTML文档中可以同时存在于不同的标签上，比如div上有类名block，ul上也有类名block，当仅需要对ul为block定义样式，此时采用类选择器并不能达到需要的效果，其实CSS选择器还支持带有标签的类名选择器ul.block，这将只匹配class为block的所有ul元素

2.7　群组选择器（selector1, selectorN）

将具有相同样式的元素分组在一起，每个选择器之间用逗号（,）隔开，注意这里省去逗号局变成后代选择器了。

3　层次选择器

层次选择器时通过HTML的DOM元素间的层次关系获取元素，其主要的层次关系包括后代、父子、相邻和通用兄弟。

3.1　语法

选择器	类型	功能描述
E F	后代选择器	选择匹配F元素，且匹配的F元素被包含在匹配的E元素内
E>F	子选择器	选择匹配F元素，且匹配的F元素是所匹配的E元素的子元素
E+F	相邻兄弟选择器	选择匹配F元素，且匹配的F元素紧接于匹配的E元素后面
E~F	通用选择器	选择匹配F元素，且位于匹配的F元素后的所有匹配的F元素

3.2　案例

    
    
    


    
1

    
2
    
3
    
4
        
5
        
6
    
    
7
        
8
            
9
                
10
            
        
    

3.3　后代选择器（E F）

选择E元素的所有后代，包括子元素、孙辈元素及更深层次的元素

3.4　子选择器（E>F）

选择E元素下的所有子元素

3.5　相邻兄弟选择器（E+F）

选择和E元素同层级且紧跟在E元素后面的元素

3.6　通用兄弟选择器（E~F）

选择E元素后面的所有兄弟元素

4　动态伪类选择器

待续。。。