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

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"配合使用，使用的场景最多的就是清除浮动