css_day8

定位的量级

• 标准流 一楼
• 浮动流 二楼
• 定位流 三楼
• （定位流可以覆盖浮动流,浮动流可以覆盖标准流）

		/* 定位元素，相互之间也有层级高低 */
        /* 默认情况下，html结构代码越往后，那么层级就越高 */
        /* 如果不想修改html的结构，但是也要修改盒子的层级———— z-index */
            /* z-index只能控制定位元素的层级 */
            /* 标准流与浮动流不能用z-index */
            /* 利用数字赋值，数字越大，层级越高 */

位置伪类选择器

		li:first-child a{
            /* 找到第一个li标签里面的a */
            color: red;
        }
        li:last-child a{
            /* 找到最后一个li里面的a */
            color: yellow;
        }
        li:nth-child(3) a{
            /* 找到某一个li标签里面的a */
            color: green;
        }
        
        
        li:nth-child(even) a{
            /* 找到第偶数个li标签里面的a */
            color: purple;
        }
        li:nth-child(odd) a{
            /* 找到第奇数个li标签里面的a */
            color: aqua;
        }
        li:nth-child(4n) a{
            /* 找到倍数个li标签里面的a */
            color: yellowgreen;
        }
        li:nth-child(n+4) a{
            /* n=0,从第四个 */
            color: blue;
        }

属性选择器

li[type]{
	通过属性名控制
	}
li[type="red"]{
	通过属性名与属性值控制
	}

精灵图

• 精灵图的作用
  把很多张小图做成一张大图，请求一次；
  降低浏览器与服务器之间的通信成本；
  提高页面的加载速度——提高用户体验。
• 精灵图的使用

	<!-- 1.设置背景图片 -->
    <!-- 2.控制背景图片的位移——要么往上，要么往左，要么是0，要么就是负数 -->
    /* 每一次位移，都必须从头开始 */