:与::区别
CSS3之前,所有的伪元素选择器,全部都是 使用 :,ex :first-line,:first-letter
CSS3中,将所有的伪元素选择器全部都升级为 :: , ex ::first-letter, ::first-line
为了能够实现浏览器的兼容性,比较推荐使用 :的写法
内容生成:
1、:before 或 ::before
匹配到某元素的内容区域之前
<div>(内容区域之前)Hello World</div>2、:after 或 ::after
匹配到某元素的内容区域之后
<div>Hello World(内容区域之后)</div>
1、声明或复位 计数器 :
counter-reset : name1 value1 name2 value2;
2、设置计数器增量 :
counter-increment: name1 value1;
3、使用计数器 :
counter(name1)
<!doctype html>
<html>
<head>
<title>标题</title>
<meta charset="utf-8">
<style>
/*1、声明或复位 计数器 : counter-reset*/
body{
counter-reset:c1 0;
}
/*2、设置计数器增量 :counter-increment*/
div{
counter-increment:c1 1;
}
/*3、使用计数器 : counter()*/
div:before{
content:"第"counter(c1)"句:";
}
</style>
</head>
<body>
<div>锄禾日当午</div>
<div>汗滴禾下土</div>
<div>谁知盘中餐</div>
<div>粒粒皆辛苦</div>
</body>
</html>
运行效果: