取nav下的所有li，除了最后一个
.nav li:not(:last-child) {
border-right: 1px solid #666;
}
子元素的选择
.nav li:first-child ~ li {
border-left: 1px solid #666; }
E~F{ sRules }
选择E元素后面的所有兄弟元素F。
A>B 表示选择A元素的所有子B元素。
与A B的区别在于，A B选择所有后代元素，而A>B只选择一代。
::after是一个CSS伪元素
使用::after，你可以从CSS里往页面上新增内容(不再要在HTML里有相应的东西)
所有支持CSS3的双冒号(::)语法的浏览器都会支持单冒号(:)语法，但IE8只支持单冒号。建议只使用单冒号，以获得最佳的浏览器支持。
双冒号(::)是一种新语法，是用来将伪元素选择器和伪元素区别开。如果不需要IE8支持，就用双冒号(::)吧
div::after {
content: "你好"; content: url(/path/to/image.jpg);
}
content: url(/path/to/image.jpg);图片会按原尺寸大小的插入，不能改变，因为渐变色实际上也是图像，所以，这些伪元素里也可以使用渐变色。
content:"" 可以用于清除左右浮动元素，也能够用于使用背景图片(这是可以设置高和宽，甚至使用background-size。)
content:counter(li) 在列表时计算行数非常方便。
子元素float浮动后撑不开父级的解决方案：
1.为父元素也设置float属性；（确定是需要为父级元素设置宽度）
2.为父元素设置overflo：hidden属性；
3.在父元素标签闭合前加上标签<div style="clear:both;"></div>;(需要注意该div不能设置float浮动)