CSS3 属性值中的 Content 和 Attr 的用法介绍

Question

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) "]";
}

还需要用 JavaScript 里拼装字符串吗？CSS3 里就能完成这些，是不是感觉 CSS3 可以部分的替代 Javascript 了！ attr 的动态生成页面内容的能力着实是一件让人兴奋的事情。你实际上可以用它配合 content 对页面的很多其他元素和属性进行操作。