< p >CSS3中的attr()函數是一個很有用的函數，它允許我們從HTML元素中獲取屬性值，并用于樣式的定義中。< /p >< pre >例如，我們可以在CSS樣式中使用以下代碼： .content:after { content: attr(data-tooltip); } 這個樣式將取出所有帶有data-tooltip屬性的HTML元素，并將該屬性的值作為::after偽元素的內容來顯示。 .content { position: relative; } .content:hover:after { display: block; } content元素的位置是相對的，當鼠標懸停在元素上時，偽元素就會被顯示出來。當然，你可以用其他選擇器來控制它何時被顯示。 這里的attr()函數的正確用法是將屬性名包裹在括號中，如下所示： content: attr(data-tooltip); 如果想要給屬性值添加引號，則需要用到CSS轉義語法，這樣就能正確解析它們了。 例如，如果data-tooltip的值是world，下面這行代碼是可行的： content: attr(data-tooltip, "Hi \"world!\" "); 這個樣式將會替換::after偽元素的內容，顯示為： Hi "world!" 總之，CSS3的attr()函數可以在樣式表中幫助我們輕松獲取HTML元素中的屬性值，并將它們應用到樣式定義中。無論是使用data-屬性還是其他HTML屬性，我們都可以用這個函數來實現這個目的。< /pre >