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

Summary

The?

attr()?CSS?function is used to 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-element's originated element is returned.

The?

attr()?function can be used with any CSS property, but support for properties other than?content?is experimental.

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

CSS函數attr()是用來獲取被選中元素的屬性值，并且在樣式文件中使用。它也可以用在偽類元素里，在偽類元素里使用，它得到的是偽元素的原始元素的值。

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

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

<div class="wrap"><a href="#" class="btn" data-tip="點擊作答">一個按鈕</a> </div> .btn {display: inline-block;padding: 5px 20px;border-radius: 4px;background-color: #6495ed;color: #fff;font-size: 14px;text-decoration: none;text-align: center;position: relative; } .btn::before {content: attr(data-tip);width: 80px;padding: 5px 10px;border-radius: 4px;background-color: #000;color: #ccc;position: absolute;top: -30px;left: 50%;transform: translate(-50%);text-align: center;opacity: 0;transition: all .3s; } .btn::after {content: '';border: 8px solid transparent;border-top: 8px solid #000;position: absolute;top: -3px;left: 50%;transform: translate(-50%); opacity: 0;transition: all .3s; } .btn:hover::before {top: -40px;opacity: 1; } .btn:hover::after {top: -13px;opacity: 1; }

?

?當然attr()還可以獲取更多的其他屬性，比如a標簽里的href屬性等，更多的用法大家自行嘗試吧。

?

總結

以上是生活随笔為你收集整理的CSS属性之attr()的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。