attr()准确的说，不应该是一个属性，而是一个CSS的函数，我们先看看MDN上的介绍吧：
Summary
The
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.attr()The
function can be used with any CSS property, but support for properties other thanattr()is experimental.content
简单翻译下，英语水平有限，主要是给英语比我还差的朋友作参考，高手可以无视：
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属性等，更多的用法大家自行尝试吧。
