css 小结

 /* 抹除浏览器差异 */

        * {

            margin: 0;

            padding: 0;

        }



        /* demo下的所有元素都加上边框 */

        .demo * {

            border: 1px solid blue;

        }



        /* 标签选择器 */

        div {

            height: 100px;

            width: 100px;

        }



        /* 类选择器 */

        .demo {}



        /* 结合标签选择器使用 */

        div.demo {}



        /* id选择器 */

        #as {}



        /* 群组选择器 */

        .demo,

        #as {}



        /* 后代选择器 */

        .demo li {

            /* color: blue; */

        }



        /* 子代选择器 */

        ul>li {

            color: yellow;

        }



        /* 兄弟选择器：一共五个li，选择了从第二个到第五个，一共四个li */

        li+li {

            color: red;

        }



        /* 通用兄弟选择器 */

        .demo~li {

            color: white;

        }



        /* 属性选择器-------- */

        ul li[id] {

            color: aqua;

        }



        /* 选择了下同时有src 和 alt 两个属性的 img 元素 */

        ul img[src][alt] {}



        /* ul 下的 id=1 的 li */

        ul li[id='1'] {

            font-size: 40px;

        }



        /* 选择ul下的id=1 且有alt 属性的img元素 */

        ul img[id=i][alt] {}



        /* E[attribute=value] 这种属性选择器，属性和属性值必须完全匹配 */

        /* 这样匹配不到 */

        div[class=demo] {}



        /* 这样才可以 */

        div[class=' demo ds'] {}



        /* E[attribute~=value] 这种只要属性值里有value 就可以 */

        div[class~=demo] {}



        /* 匹配alt属性值以aa开头的所有img */

        img[alt^=aa] {}



        /* 匹配alt以aa结尾的所有img元素 */

        img[alt$=aa] {}



        /* 所有class包含ds的div标签 */

        div[class*=ds] {}



        /* 所有src属性值为sasd或以sasd-开头的所有img */

        img[src|='sasd'] {}

/* 链接点击前的颜色 */

        a:link{

            color: red;

        }

        /* 链接点击后的颜色 */

        a:visited{

            color: blue;

        }

        /* 鼠标悬停时的颜色 */

        a:hover{

            color: palegoldenrod;

        }

        /* 鼠标点击时的颜色 */

        a:active{

            color: pink

        }