【引荐课程: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属性有什么用的细致内容,更多请关注ki4网别的相干文章!