一、伪类内容生成 1、 通过 css 向已有的元素上增加新的文本（图片）内容 选择器： 1、:before 向匹配元素之前增加生成的内容 定位到匹配元素开始的位置 2、:after 向匹配元素之后增加生成的内容
eg:
div:before{} p:after{} 属性：
1、content 作用：配合 :before , :after伪元素插入生成的内容div:before{ content:"生成的内容:"; } 常用取值: 字符串：普通文本 url:图像 计数器；
2、计数器 通过css 定义一个计数器，在其他元素中可以使用该计数器生成的数字。 属性： 1、 counter-reset 作用：用于定义计数器并设置初始值 如果不设置初始值，那么默认为0，如果设置的话可以为正、负、0 选择器{ counter-reset:counter1 10; } 选择器{ counter-reset:counter1 10 counter2 20; } 注意：如果整个页面的任何一个元素都想使用到计数器的话，最好将其定义在body中。切记将计数器定义在某个元素中 (除body外),如果这样定义，再使用时永远都是初始值。 body{ counter-reset:c1 10 c2 20; } 2、counter-increment 作用:设置每次使用计数器时的增量，默认值为1 属性值：可以为正(递增)，也可以为负(递减) 注意：哪个标签用，在那个标签中声明 counter-increment属性 语法： counter-increment:计数器名称 增量值; div{ counter-increment:c1 10; } 函数： counter(counterName) 函数 作用：使用计数器创建出来的数字文本。 counterName：计数器名称二、多列
属性： 1、column-count 元素被分隔的列数 3 2、column-gap 列与列之间的间隔 px 3、column-rule 列规则，列间隔符的宽度、样式、颜色 column-rule:1px solid red; 浏览器兼容问题： Internet 10 和 Opera 支持多列 Firefox : -moz- Chrome 和 Safari : -webkit- div{ column-count:3; column-gap:50px; column-rule:2px solid red;
-o-column-count:3;/*Opera*/ -o-column-gap:50px; -o-column-rule:2px solid red;
-moz-column-count:3; /*火狐中的多列设置*/ -moz-column-gap:50px; -moz-column-rule:2px solid green;
-webkit-column-count:3;/*Chrome 与 Safari*/ -webkit-column-gap:50px; -webkit-column-rule:2px solid red; } 常用火狐写法 -moz-column-count:3; -moz-column-gap:50px; 分开写 -moz-column-rule-style:dashed/dotted(点状)/double(双线)/solid(实线); -moz-column-rule-width:thin/medium/thick/length; -moz-column-rule-color:orange; 整体 -moz-column-rule:2px dashed red;
更多专业前端知识，请上 【猿2048】www.mk2048.com