1.竖直分割线

　　  /*使用伪元素制作导航列表项分隔线*/

        .nav li{background:linear-gradient(to bottom,#dd2926,#a82724,#dd2926) no-repeat right / 1px 15px;}

        /*删除第一项和最后一项导航分隔线*/

        .nav li:last-child{background:none;}

     https://www.imooc.com/code/1881

2.超出部分字体....

  text-overflow:ellipsis;

    overflow:hidden;

    white-space:nowrap;

3.字体倾斜

        .nav a{

          display: inline-block;

          -webkit-transition: all 0.2s ease-in;

          -moz-transition: all 0.2s ease-in;

          -o-transition: all 0.2s ease-in;

          -ms-transition: all 0.2s ease-in;

          transition: all 0.2s ease-in;

        }

        .nav a:hover{

          -webkit-transform:rotate(10deg);

          -moz-transform:rotate(10deg);

          -o-transform:rotate(10deg);

          -ms-transform:rotate(10deg);

          transform:rotate(10deg);

        }

4.属性选择器

 a[class^="column"]{background:red;}

 a[href$=".doc"]{background:red;}

 a[href*="##"]{background:red;}

 5.CSS3 结构性伪类选择器—not

div:not([id="footer"]){

  background: red;

}

6.CSS3 结构性伪类选择器—nth-child(n) 可以自定义跨行显示不同样式【nth-last-child(n) 从后面开始算】  odd奇数  even 偶数

https://www.imooc.com/code/739

7.CSS3 first-of-type选择器

和first-child 相似 但是 他可以控制那种html元素的第一个如

.wrapper > div:first-of-type {

  background: orange;

}

https://www.imooc.com/code/809

8.CSS3 nth-of-type(n)选择器   和 nth-child(n)类似【:last-of-type倒着来排序】

9.CSS3 only-child选择器

 “:only-child”选择器选择的是父元素中只有一个子元素，而且只有唯一的一个子元素。也就是说，匹配的元素的父元素中仅有一个子元素，而且是一个唯一的子元素。

10.only-of-type选择器  和 only-child类似  只是在多个子元素中 这个指定元素的数量是1个

11.CSS3选择器 ::before和::after

::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常和"content"配合使用，使用的场景最多的就是清除浮动