CSS3入门之选择器

属性选择器

    前面章节介绍过 这里重点介绍CSS3新增的几个 主要有以下几个：

1. 格式 E[attr^="value"] 选取E元素 适配其中属性attr 并且属性值以value字符开头 进行操作
2. 格式 E[attr$="value"] 选取E元素 适配其中属性attr 并且属性值以value字符结尾 进行操作
3. 格式 E[attr*="value"] 选取E元素 适配其中属性attr 并且属性值包含value字符 进行操作

结构伪类选择器

主要有以下几个：

1. :first-child 选择第一个子元素
2. :last-child 选择最后一个子元素
3. :nth-child(n)选择第n个子元素
4. :only-child 选择父元素有且仅有一个子元素的孩子
5. :first-of-type 同级元素第一个兄弟元素
6. :last-of-type 同级元素最后一个兄弟元素
7. :nth-of-type(n)同级元素中第n个兄弟元素 无论是否包含其它类型同级元素
8. :only-of-type 匹配有且仅有一个同类型元素的子元素
9. :root 根元素
10. :empty 不包含任何子元素或者内容的元素
11. :not() 该元素之外的所有元素
12. :target 选取页面中某个target元素

UI元素状态伪类选择器

主要有以下几个：一般应用于表单

1. :focus 指定元素获得光标焦点时 所设置的样式
2. :checked 给所有设置checked选择属性的元素 设置样式
3. ::selection 给元素中被选择的网页文本 设置样式
4. :enabled 给所有设置enabled可用属性的元素 设置样式
5. :disabled 给所有设置disabled不可用属性的元素 设置样式
6. :read-write 给所有设置只写属性的元素 设置样式
7. :read-only 给所有设置只读属性的元素 设置样式
8. ::before 在指定元素之前插入内容
9. ::after 在指定元素之前插入内容

    
    
    


    
    
    
    
    


    音乐

    

        
音乐
    

    


    
段落 中国

    
段落 文化

    
段落 博大精深

    

        
选项一
        
选项二
        
选项三
        
选项四
        
选项五
        
选项六
        
选项七
        
选项八
    

    

        行内元素1

        行内元素1.5

        
段落
        行内元素2

        行内元素2.5

        
段落
        行内元素3

        行内元素4
    

    

        内容
    

    

                
        用户名：

                
        密   码：

        性   别：男女

        爱   好：音乐
                               电影
                               篮球
                               乒乓球
                               羽毛球