css样式——content, counter

最新推荐文章于 2024-01-26 16:09:53 发布

wheeler

最新推荐文章于 2024-01-26 16:09:53 发布

阅读量1.5k

点赞数 1

分类专栏： web前端技术文章标签： css firefox url chrome 浏览器 ie

本文链接：https://blog.csdn.net/asdf311/article/details/5776665

版权

web前端技术专栏收录该内容

3 篇文章 0 订阅

订阅专栏

content属性一般与:after及:before 伪类一起使用，在对象前或后显示内容。
注意：content属性以及:after,:before伪类只有支持完整css2.0规则的浏览器支持(IE系列需IE8+，FireFox系列需FF3.5+，Chrome支持，其它有待大家发现。)

比较常见的content属性内容有：
1.string 如："hello"
2.url资源如：url("http://www.xxx.com/img/xx.gif")
3.counter计数器如：counter(xxx)

不同属性相互连接时，无需使用"+"，只需挨个写下去即可。如：
content:url("http://www.xxx.com/img/xx.gif") counter(xxx) "號"
表现形式为：首先会有1个图片，然后是一个序号，后面紧跟一个中文字"號"

PS:例子见结尾。

--------------------我是华丽的分割线--------------------
counter
counter分为counter-increment与counter-reset声明

counter-increment: 计数器名(id)[空格]计数器步长(计数器起始数，默认值为1)——相当于计数器定义
counter-reset: 计数器名(id)[空格]计数器步长(计数器起始数，默认值为1)——相当于计数器归位
如：
counter-increment: SectionCounter;
counter-reset: SectionCounter 10;

--------------------我是最终分割线--------------------
实例代码，如下：
<html>
<head>
<title>css样式——content, counter 示例</title>
<style type="text/css">
p
{
font-size:12px;
counter-increment:SectionCounter;
}

p:before
{
content:url("http://www.csdn.net/images/favicon.ico") counter(SectionCounter) "號";
}
</style>
</head>
<body>
我就是第一段啦~~
我就是第二段啦~~
我就是第三段啦~~
我就是第四段啦~~
我就是第五段啦~~
我就是第六段啦~~
我就是第七段啦~~
</body>
</html>