css基础之选择器

        1.css选择器分类：
        1.1 基础选择器
            优先级：id选择器>类选择器>标签选择器>通配符选择器 
            id选择器：#id名称
            类选择器：.class名称
            标签选择器：标签名称
            通配符选择器：*
        1.2 层次(复杂)选择器：
            后代选择器：div p{}
            子代选择器：div>p{}
            相邻兄弟选择器：div+p{}
            并集选择器：div,p{}
        1.3 伪类选择器：
            选择器:hover{}--- 鼠标悬停
        1.4 结构伪类选择器：
            选择器:first-child{}--- 第一个子元素
            选择器:last-child{}--- 最后一个子元素
            选择器:nth-child(n){}--- 第n个子元素
        2.背景：
        2.1 背景颜色：
            background-color: #f00;--- 背景颜色
        2.2 背景图片：
            background-image: url(图片路径);--- 背景图片
            background-repeat: no-repeat;--- 背景图片不重复
            background-position: center;--- 背景图片居中
            background-size: cover;--- 背景图片自适应
            背景图片简写：
            background: url(图片路径) no-repeat center/cover;
        2.3 背景渐变：
            background: linear-gradient(渐变方向,颜色1,颜色2,颜色3...);
            渐变方向：
                to top--- 从下到上
                to bottom--- 从上到下
                to left--- 从右到左
                to right--- 从左到右
                to top left--- 从右下到左上
                to top right--- 从左下到右上
                to bottom left--- 从右上到左下
                to bottom right--- 从左上到右下
            background:radial-gradient(渐变形状,颜色1,颜色2,颜色3...);
            渐变形状：
                circle--- 圆形
                ellipse--- 椭圆形
                closest-side--- 以最近边为半径的圆形
                closest-corner--- 以最近边为半径的椭圆形
                farthest-side--- 以最远边为半径的圆形
                farthest-corner--- 以最远边为半径的椭圆形
        3.显示模式：
        3.1 块级元素：
            特点：1.独占一行2.可以设置宽高
            常见的块级元素：div，h1~h6，p
        3.2 行内元素：
            特点：1.不独占一行2.不能设置宽高
            常见的行内元素：span，a，strong，em
        3.3 行内块元素：
            特点：1.不独占一行2.可以设置宽高
            常见的行内块元素：input，button，img
        3.4 display属性：
            display:block;--- 块级元素
            display:inline;--- 行内元素
            display:inline-block;--- 行内块元素