CSS小笔记

     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;
}