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