css【详解】 |
您所在的位置：网站首页 › csscontent用法 › css【详解】 |
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. 生成文本为什么open-quote/close-quote很少使用？ 因为直接使用字符更干脆！ .ask:before { content:'提问：“'; } .answer:before { content:'回答：“'; } .ask:after, .answer:after { content: '”'; } 4. 生成图片 a:after { content: url(data:image/gif;base64,R0lGODlhBQAFAIABAM0AAAAAACH5BAEAAAEALAAAAAAFAAUAAAIHRIB2eKuOCgA7); } 5. 生成属性值 百度 a:after { content: "(" attr(href) ")"; }效果为： 百度（百度一下，你就知道） 支持自定义的HTML属性 .icon:before { content: attr(data-title); } 6. 计数器一个简单的范例如下： 我是王小二的第5个孩子 我是王小二的第7个孩子 我是王小二的第9个孩子 .reset { counter-reset: wangxiaoer 3; } .counter:before { content: counter(wangxiaoer) '. '; counter-increment: wangxiaoer 2; } 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
范例代码如下： 我是王小二 我是王小二的大儿子 我是王小二的二儿子 我是王小二的二儿子的大孙子 我是王小二的二儿子的二孙子 我是王小二的二儿子的小孙子 我是王小二的三儿子 我是王小三 我是王小四 我是王小四的大儿子 .reset { padding-left: 20px; counter-reset: wangxiaoer; } .counter:before { content: counters(wangxiaoer, '-') '. '; counter-increment: wangxiaoer; } 注意事项显示content计数值的那个DOM元素在文档流中的位置一定要在counter-increment元素的后面，否则是没有计数效果的。 |
【本文地址】