attr()準(zhǔn)確的說，不應(yīng)該是一個(gè)屬性，而是一個(gè)CSS的函數(shù)，我們先看看MDN上的介紹吧：
CSS函數(shù)attr()是用來獲取被選中元素的屬性值，并且在樣式文件中使用。它也可以用在偽類元素里，在偽類元素里使用，它得到的是偽元素的原始元素的值。
attr()函數(shù)可以和任何CSS屬性一起使用，但是除了content外，其余都還是試驗(yàn)性的（簡(jiǎn)單說就是不穩(wěn)定，瀏覽器不一定支持）。
那具體怎么用呢，給大家舉個(gè)栗子，前段時(shí)間剛好用到的，給按鈕實(shí)現(xiàn)提示功能，就是鼠標(biāo)放上去后，出來個(gè)小提示：
<div class="wrap"> <a href="#" class="btn" data-tip="點(diǎn)擊作答">一個(gè)按鈕</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; }
當(dāng)然attr()還可以獲取更多的其他屬性，比如a標(biāo)簽里的href屬性等，更多的用法大家自行嘗試吧。
【 微信掃一掃 】
