CSS（一）内容生成

最新推荐文章于 2019-06-22 22:00:01 发布

喵咪那个汪~

最新推荐文章于 2019-06-22 22:00:01 发布

阅读量352

点赞数

分类专栏： CSS 文章标签：：与：：计步器内容生成

本文链接：https://blog.csdn.net/weixin_42675177/article/details/81665572

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

:与::区别

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>

运行效果：

喵咪那个汪~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS（一）内容生成

:与::区别CSS3之前，所有的伪元素选择器，全部都是使用 :，ex :first-line,:first-letterCSS3中，将所有的伪元素选择器全部都升级为 :: , ex ::first-letter, ::first-line为了能够实现浏览器的兼容性，比较推荐使用 :的写法内容生成： 1、:before 或 ::before 匹...
复制链接

扫一扫