唯品秀前端博客

说起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>

效果如下图

或许这样不够直观,你最好将代码保存,在本地打开控制台,查看他们到底发生了什么

本站所有文章、图片、资源等如无特殊说明或标注,均为来自互联网或者站长原创,版权归原作者所有;仅作为个人学习、研究以及欣赏!如若本站内容侵犯了原著者的合法权益,可联系我们进行处理,邮箱:343049466@qq.com
赞(8) 打赏
标签:

上一篇:

下一篇:

相关推荐

0 条评论关于"CSS3中伪类的content和attr的用法"

表情

最新评论

    暂无留言哦~~
谢谢你请我吃鸡腿*^_^*

支付宝扫一扫打赏

微信扫一扫打赏