简析CSS表述式attr()的应用

2020-10-18 20:19 jianzhan

CSS表述式 attr() 用来获得挑选到的元素的某1HTML特性值,并用于其款式。它还可以用于伪元素,特性值选用伪元素所依附于的元素。

attr() 表述式能够用于任何CSS特性。


英语的语法:

CSS Code拷贝內容到剪贴板
  1. attr( attribute-name <type-or-unit>? [, <fallback> ]? )  

ttr()作用早在CSS 2.1规范中就早已出現,但如今才刚开始广泛时兴。它出示了1个恰当的方式在CSS中应用HTML标识上的特性,在许多状况下都能帮你省去了过去必须Javascript解决的全过程。

要想应用这个作用,你必须用到3种元素:1个:before 或 :after CSS伪类款式, .content特性,和1个带有了你想应用的HTML特性名字的attr()表述式。比如,想去显示信息<h3>题目上的data-prefix特性的值,你能够写成这样:

CSS Code拷贝內容到剪贴板
  1. h3:before {     
  2.     contentattr(data-prefix) " ";     
  3.     }     
  4.      
  5.     <h3 data-prefix="Custom prefix">This is a heading</h3>    


明显,这个事例并沒有展现它有多大用途,只是展现了它的基础用法。让大家来试1个更有效的事例,attr()的1个极好的运用便是当客户复印网页页面时将网页页面连接显示信息出来。以便完成这个,你能够这样写:

CSS Code拷贝內容到剪贴板
  1. @media print {     
  2.     a:after {     
  3.     content" (link to " attr(href) ") ";     
  4.     }     
  5.     }    


  
    <a href="http://example.com">Visit our home page</a> 
1旦你了解了这个技能,你就会惊讶于许多情况下它能给你的工作中带来的便捷!

提醒:在新版的CSS3规范中,attr()作用被拓展,能够用在各种各样CSS标识中。在CSS2.1中attr()一直回到1个标识符串。在CSS3中attr()能够回到多种多样不一样的种类。