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属性等,更多的用法大家自行尝试吧。