html5学习-CSS3-选择器插入对象

本文深入探讨了CSS3选择器在网页中插入文字、图片、背景及计数器等元素的方法,包括如何使用content属性插入文字、url添加多媒体、CSS背景设置以及插入计数器等。同时提醒读者注意不同方法在打印背景时的区别。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

利用CSS3的选择器可以准确的插入你想要插入的东东
首先最基本的是插入文字,利用 content:来实现,不多说直接上代码:
html5学习-CSS3-选择器插入对象

这个是插入文字的代码,效果图如下
html5学习-CSS3-选择器插入对象
这个就是效果图了,假如我有三个h2标签,但是我在第二个标签位置不想插入文字等,那么就指定其属性,content: none;就可以了,但是要指定class或者id都行。

然后是插入图片等多媒体类型的东东:
代码如下图:
html5学习-CSS3-选择器插入对象
这个代码比较简单,就是用url来添加多媒体,不仅仅是图片,也可以音乐甚至视频。
效果图:
html5学习-CSS3-选择器插入对象

所以呢,这个其实比较简单的了。
但是呢,假如我们用另外一种方法来添加背景呢?CSS代码:
h1.class{
background-image: url(new.png);
background-repeat: no-repeat;
padding-left: 20px;
}
但是假如用这个代码,在打印背景的时候是打印不出来的,所以要时刻注意这个不同之处!

下面还一个插入计数器的:
html5学习-CSS3-选择器插入对象
html5学习-CSS3-选择器插入对象
其实就是插入一个计数器了。。
还有获取alt属性值啊,就是content: attr(alt)了
大致先这些了,有别的等我补充困死了。。。晚安
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值