说起css的content,很多人都知道那就是用来在标签头尾插入内容的,但如果你说css里面的attr和content有啥关系,我想还是蛮多人不知道的吧,attr做前端的应该见名思义是用来操作html属性的,确实,在这里我们依然是用来跟属性相关操作
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>content-attr</title>
<style>
a:after {
content: "("attr(href)")";
}
div:after{
content: attr(abbr);/*不用引号也可以*/
}
img:after{
content: "("attr(title)")";
}
</style>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<div abbr="我是个属性,你看能获取到吗" title="000">我擦,attr你牛逼了</div>
<img src="http://www.weipxiu.com/wp-content/uploads/2017/08/kulian.png" title="图片" alt="">
<p>图片是单标签,不允许你使用这种伪类</p>
</body>
</html> |
效果如下图

或许这样不够直观,你最好将代码保存,在本地打开控制台,查看他们到底发生了什么
「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」
共 0 条评论关于"CSS3中伪类的content和attr的用法"
最新评论