css3中content和attr属性有什么用

CSS3中的content属性可以通过CSS在页面元素中填写内容，还可以实现字符串连接操纵；content和attr配合使用可以从元素中动态的猎取内容

【引荐课程：CSS3教程】

CSS3的显现使得样式表的功效变得越来越强大，一样也使得开发越来越简便便利。特别是CSS3中显现的新特性，如transitions, animations, 和 transforms等，这里面有一个特点虽然不是那么抢眼，但却是非常的有用，它就是content和attr表达式，它们能在页面下面暗暗的使用CSS来生成内容，下面让我们看看 attr 和 content 怎样彼此配合发生奇妙结果的。

根本content用途

content属机能让程序员使用CSS往页面元素里填写内容

例：

.myDiv:after { content: "我是一个使用*content*属性生产的静态文字"; }

请留意，假如想让伪元素:after绝对定位，必需对div设定position: relative

content和attr配合使用

假如不想把content内容在CSS里写死，那么可以使用attr表达式来从页面元素中动态的猎取内容：

/* <div data-line="1"></div> */ 
div[data-line]:after { 
 content: attr(data-line); 
/* 属性名称上不要加引号！ */ }

attr属性平常和自定义属性data-配合使用，由于传统的其它属性虽然也能存值，但平常不适合存置表达性文字。

content里的字符串连接操纵

这种字符串连接很像常规编程说话：

/* <div data-line="1"></div> */ 
div[data-line]:after
 { content: "[line " attr(data-line) "]"; }

在CSS3中就可以完成像JavaScript里的字符串拼接，别的attr的动态生成页面内容也是一件很有用的事。我们可以用它配合content对页面的许多其他元素和属性停止操纵。

总结：以上就是本篇文章的全部内容，但愿对大家有所帮忙。

以上就是css3中content和attr属性有什么用的具体内容，更多请关注百分百源码网其它相关文章！