CSS高级技巧

取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浮动)