CSS属性之attr()
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 thancontent
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属性等,更多的用法大家自行尝试吧。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了