attr()準確的說，不應該是一個屬性，而是一個CSS的函數，我們先看看MDN上的介紹吧：
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屬性等，更多的用法大家自行嘗試吧。
【 微信掃一掃 】
