css【详解】—— content属性（含css计数器）

content 属性与 :before 及 :after 伪元素配合使用，来插入生成内容。

content 属性生成的对象称为“匿名替换元素”，生成的内容都是替换元素

content属性的特点

1. content生成的文本无法被选中

content生成的文本无法被屏幕阅读设备读取，也无法被搜索引擎抓取，因此，千万不要自以为是地把重要的文本信息使用content属性生成，因为这对可访问性和SEO都很不友好，content属性只能用来生成一些无关紧要的内容，如装饰性图形或者序号之类；同样，也不要担心原本重要的文字信息会被content替换，替换的仅仅是视觉层。

2. 设置了content属性，但无内容的元素，仍会被:empty伪类选择器选中

div:empty { border-style: dashed; }

3. content动态生成的值无法获取。

content属性的应用

1. 清除浮动

.clear:after {content: '';display: table;　/* 也可以是'block' */clear: both;
}

2. 实现“两端对齐”以及“垂直居中/上边缘/下边缘对齐”效果

参考范例：content辅助元素与布局 » CSS世界demo演示

3. 生成文本

4. 生成图片

a:after {content: url(data:image/gif;base64,R0lGODlhBQAFAIABAM0AAAAAACH5BAEAAAEALAAAAAAFAAUAAAIHRIB2eKuOCgA7);
}

5. 生成属性值

效果为：

百度（百度一下，你就知道）

支持自定义的HTML属性

.icon:before {content: attr(data-title);
}

6. 计数器

一个简单的范例如下：

属性counter-reset

 counter-reset: wangxiaoer 3;

• 第1个参数用于给计数器取个自定义的名称，如此处的 wangxiaoer
• 第2个参数为计数器的初始值（计数的起点），默认为0

IE和Firefox不识别值为负数或小数的初始值，认为是不合法数值，直接无视，当作默认值0来处理；

Chrome支持为负数或小数的初始值，任何小数都是向下取整，如2.99当成2处理。

counter-reset还可以设置为none和inherit，表示取消重置和继承重置

还可以一次命名多个计数器

counter-reset: wangxiaoer 2 wangxiaosan 3;

属性counter-increment

counter-increment: wangxiaoer 2;

• 第1个参数为计数器的名称  wangxiaoer
• 第2个参数为计数器的步长（即每次计数时的改变幅度），默认为1

 每次使用css计数器时，都会调用一次counter-increment，所以上方范例中，初始值为3，但第一个元素最终渲染的编号是5

和counter-reset一样，counter-increment也可以一次定义多个

counter-increment: wangxiaoer wangxiaosan;

方法counter()

用于显示计数

用法一： 

counter(wangxiaoer)

参数为计数器的名称  wangxiaoer

用法二：改变计数类型

counter(name, style)

• 第2个参数和list-style-type的值相同，可以为以下值：

disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none | armenian | cjk-ideographic | georgian | lower-greek | hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha | lower-latin | upper-latin

即计数器递增递减不仅支持数字，还可以是英文字母或者罗马文等。

content: counter(wangxiaoer, lower-roman);

用法三：支持级联调用

content: counter(wangxiaoer) '\A' counter(wangxiaosan);

方法counters()

用于嵌套计数，如1.1 1.2 1.3

范例代码如下：

注意事项

显示content计数值的那个DOM元素在文档流中的位置一定要在counter-increment元素的后面，否则是没有计数效果的。 

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！