欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!
  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表达式来从页面元素中动态的获取内容:
 
  /*<divdata-line="1"></div>*/
 
  div[data-line]:after{
 
  content:attr(data-line);
 
  /*属性名称上不要加引号!*/}
 
  attr属性通常和自定义属性data-配合使用,因为传统的其它属性虽然也能存值,但通常不适合存放表达性文字。
 
  content里的字符串连接操作
 
  这种字符串连接很像常规编程语言:
 
  /*<divdata-line="1"></div>*/
 
  div[data-line]:after
 
  {content:"[line"attr(data-line)"]";}
 
  在CSS3中就可以完成像JavaScript里的字符串拼接,另外attr的动态生成页面内容也是一件很有用的事。我们可以用它配合content对页面的很多其他元素和属性进行操作。
 
  总结:以上就是本篇文章的全部内容,希望对大家有所帮助。




本文转载自中文网

 

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/jiqiao/j54112.shtml