CSS常用的三种单位及常用的选择器-2018年8月16日23：44

1、手抄: CSS中常用的三种单位案例

编程: CSS中常用的选择器

        /*标签选择器*/

        ul { }

        ul:after {  /*子块撑开父块*/        }

        ul li {        }

        /*id选择器*/

        #item1 {}

        /*类选择器*/

        .item2 {}

        /*属性选择器: 属性名*/

        ul li[class] {        }

        /*属性选择器: 属性值*/

        ul li[class="item2"] {        }

        /*属性选择器: 以指定属性值开头*/

        ul li[class^="cat"] {          }

        /*属性选择器: 以指定属性值结束*/

        ul li[class$="pig"] {        }

        /*属性选择器: 属性值中包含指定子串*/

        ul li[class*="te"] {        }

        /*后代选择器*/

        body ul li {        }

        /*子选择器*/

        ul > li[class$="pig"] {        }

        /*相邻选择器*/

        ul li[class$="pig"] ~ * {        }

        /*相邻兄弟选择器*/

        ul li[class$="pig"] + li {        }

        /*群组选择器*/

        h1, p {        }

        /*伪类选择器: 链接*/

        a {        }

        /*访问前*/

        a:link {        }

        /*访问后*/

        a:visited {        }

        /*获取焦点时*/

        a:focus {        }

        /*鼠标悬停时*/

        a:hover {        }

        /*鼠标点击时*/

        a:active {        }

        /*伪类选择器: 位置*/

        /*选择集合中的第一个元素*/

        ul li:first-child {        }

        /*选择集合中的最后一个子元素*/

        ul li:last-child {        }

        /*按索引选择指定的元素,注意从1开始计数*/

        ul li:nth-child(5) {        }

        /* 选择所有的偶数小球变色 */

        /* 2n偶数, even偶数, 2n+1奇数, odd奇数*/

        ul li:nth-child(even) {        }

        /*伪类选择器: 根据子元素数量*/

        /*选择具有唯一子元素的元素*/

        ol:only-child {        }

        /* 选择指定类型的唯一子元素 */

        ol li:only-of-type {        }

        /* 倒数选择指定位置的元素 */

        ul li:nth-last-child(3) {        }

        /*选择指定父级的第二个<li>子元素*/

        ol li:nth-of-type(2) {        }

        /*选择页面中内容为空的元素*/

        :empty {        }

        :empty:after {        }

        :empty:before {        }