第9章 css3新增选择器（2）

CSS3新特性

1、强大的CSS选择器
2、新的颜色制式和透明设定
3、多栏布局的实现
4、多背景图效果
5、文字阴影效果
6、开放的网络字体类型
7、圆角
8、边框背景图片
9、盒子阴影
10 、媒体查询

浏览器支持情况

image.png

新增选择器

• 新增选择器（掌握 4种）
• 属性选择器（掌握）
• 伪类选择器（掌握 讲过）
• UI元素伪类选择器（优先级低一些）
• 伪元素选择器(了解，自学)

通配选择器

• 选择所有
  E>F 子选择器 （儿子,直接子类 ）

  
  
  
  
  
  
  
  
  

  This is a important

  p---------important

  heading

  
  
  

效果：

image.png

试着将大于号改为空格试试效果

E+F 相邻 紧挨着e的f元素 （第一个兄弟）

    
        
        
        
    
    
        
11111111
        
22222
        
333333
        
444444
    

E~F 通用选择器 E后面所有的F （所有兄弟）
上面的代码把+修改成~试试效果

属性选择器

根据指定名称的属性的值查找元素

1、li[class=red] 查询class属性名为red的

    
    
        
            
            
            
        
        
            

                
red
                
red
                
red
                
red
                
red
            
        
    

image.png

2、li[class*=red] 包含即可

    
    
        
            
            
            
        
        
            

                
red
                
red
                
red
                
red
                
red
            
            
            

                
red
                
red
                
red
                
red
            
        
    

image.png

学生练习

3、li[class^=red] 以red开头的
4、li[class$=red] 以red开头结尾

伪类选择器(前面章节讲过,此处略)

动态伪类选择器（掌握 一般用在链接,指定链接在不同时机下的样式，比如说链接被点击前，鼠标悬停时，被激活时，被点击后等等）
E：link 链接没有被访问过
E：visited 链接被访问过
E：active 激活时 从悬停到释放之间，按往鼠标不释放 (按住的瞬间）
E：hover 悬停
E：focus 获取焦点
正确的书写顺序： a:link、a:visited、a:hover、a:active

        


测试伪类

UI元素伪类选择器

E:checked 匹配用户界面上处于选中状态的元素E(input type=radio/ checkbox)
E:enabled 匹配用户界面上处于可用状态的元素
E:disabled 匹配用户界面上处于禁用状态的元素

    
选中下面的项试试
    

        
蓝色
        
红色
        
黑色
    


    
选中下面的项试试
    

        
蓝色
        
红色
        
黑色
    

结构伪类选择器

image.png

    
    
        
            
            
            
        
        
            

                
red
                
red
                
red
                
red
                
red
            
            
            

                
red
                
red
                
red
                
red
            
        
    

image.png

其他的学生练习

伪元素选择器(建议了解-自学)

1、伪元素选择器与content配合使用

    
平凡的世界

image.png

2、如果想为伪元素设置宽高，必须把元素变为块级元素display:block 或position或float

image.png

例子：制作如下效果

image.png

step1-先构建基本div

image.png

step2:.child02前后加伪元素，调整位置和设定效果

image.png

关键代码：

image.png

::first-letter第一个字符

    
    
        
            
            
            
        
        
            
UP主自己创建的前端交流群：865712069，有时会分享一些课程资料，for free。
        
    

::first-line

    
    
        
            
            
            
        
        
            
UP主自己创建的前端交流群：865712069，有时会分享一些课程资料，for free。
            
            
            
            
UP主自己创建的前端交流群：865712069，有时会分享一些课程资料，for free。

            UP主自己创建的前端交流群：865712069，有时会分享一些课程资料，for free。
            
        
    

效果：

image.png

::selection

改变元素被选中时的样式

    
    
        
            
            
            
        
        
            
UP主自己创建的前端交流群：865712069，有时会分享一些课程资料，for free。
        
    

用鼠标选中部分文本看样式

image.png