css选择器练习题

任务

给每个列表定义不同的背景颜色

css选择器练习题_第1张图片

提示:使用结构伪类选择器:nth-of-type()

设置缩略图外形效果

提示:使用伪元素::after制作圆形效果

1、给每个缩略图设置不同的图片

提示:使用伪结构选择器:nth-of-type(),并且配合::after

2、给每个缩略图添加透明度蒙板效果

提示:使用伪类选择器::before给缩略图添加蒙板效果

3、鼠标悬浮在缩略图上时,修改缩略图上蒙板的透明度

提示:通过:hover和::before配合修改opacity的值为0

4、点击缩略图,切换背景图片

提示:通过目标选择器:target进行背景图片的切换

5、控制不是被点击图片的层级大小,让其不显示

提示:通过“否定选择器:not()”和“目标选择器:target”来控制不是被切换的背景图像不显示



    
        
    	CSS3 Full Background Slider 
        
    
    
        
        
        
        
        
        
    


你可能感兴趣的:(css)