CSS屬性之attr()

attr()準確的說，不應該是一個屬性，而是一個CSS的函數，我們先來看看MDN上的介紹：

Summary

The attr() CSS function is used to retrieve the value of retrieve the value of an attribute of the selected element and use it in the style sheet. It can be used on pseudo-elements too and, in this case, the value of the attribute on the pseudo-elementement's ginated element is returned. function can be used with any CSS property, but support for properties other than content is experimental.

簡單翻譯下，英文程度有限，主要是給英文比我差的朋友作參考，高手可以無視：

CSS attr()是用來取得被選取元素的屬性值，並且在樣式檔案中使用。它也可以用在偽類元素裡，在偽類元素裡使用，它得到的是偽元素的原始元素的值。

attr()函數可以和任何CSS屬性一起使用，但是除了content外，其餘都還是試驗性的（簡單說就是不穩定，瀏覽器不一定支援）。

那具體怎麼用呢，給大家舉個栗子，前段時間剛好用到的，給按鈕實現提示功能，就是滑鼠放上去後，出來個小提示：

<p class="wrap">
  <a href="#" class="btn" data-tip="点击作答">一个按钮</a></p>

rrrere

 

 當然attr()還可以取得更多的其他屬性，例如a標籤裡的href屬性等，更多的用法大家自行嘗試吧。

 更多CSS屬性之attr() 相關文章請追蹤PHP中文網！