CSS中如何给图片标签设置不同的样式

插入多张图片的时候图片的标签都是<img>,这样的话如果要设置每张图片有不同的边框的时候就无法设置了,设置出来都是相同的,应该如何设置可以是每一张图片都能分开设置呢?... 插入多张图片的时候图片的标签都是<img>,这样的话如果要设置每张图片有不同的边框的时候就无法设置了,设置出来都是相同的,应该如何设置可以是每一张图片都能分开设置呢? 展开
 我来答
网海1书生
科技发烧友

2017-03-06 · 擅长软件设计、WEB应用开发、小程序
网海1书生
采纳数:12311 获赞数:26228

向TA提问 私信TA
展开全部

可以有多种方法实现的。比如可以给每个img设置不同的ID:

<img id=p1 src="1.jpg"/><img id=p2 src="2.jpg"/><img id=p3 src="3.jpg"/>
<style>
#p1 {border:1px solid #f00}
#p2 {border:1px solid #0f0}
#p3 {border:1px solid #00f}
</style>

或者是不同的class:

<img class=p1 src="1.jpg"/><img class=p2 src="2.jpg"/><img class=p3 src="3.jpg"/>
<style>
.p1 {border:1px solid #f00}
.p2 {border:1px solid #0f0}
.p3 {border:1px solid #00f}
</style>

还有一种更灵活的方式,但需要浏览器支持css3:

<img src="1.jpg"/><img src="2.jpg"/><img src="3.jpg"/>
<style>
img:nth-of-type(1) {border:1px solid #f00}
img:nth-of-type(2) {border:1px solid #0f0}
img:nth-of-type(3) {border:1px solid #00f}
</style>

这种方法还有多种灵活的处理方式,比如:

img:nth-of-type(odd) 会选择所有单数的图片(第1张、第3张、第5张……)

img:nth-of-type(even) 会选择所有双数的图片(第2张、第4张、第6张……)

img:nth-of-type(2n) 也是选择双数

img:nth-of-type(2n+1) 也是选择单数

img:nth-of-type(3n+1) 从第1张算起每3张取出1张图片(第1张、第4张、第7张……)

img:nth-of-type(5n+3) 从第3张算起每5张取出1张图片(第3张、第8张、第13张……)


除了这个,css还有几十种不同的选择器,你百度搜一下 css选择器 就知道了。

logo在线生成器
2024-10-28 广告
在上海数都信息科技有限公司,我们致力于将创意与技术完美融合,将文字的力量转化为直观生动的图标设计。想象一下,一段精炼的文案——“数据洞察未来,科技引领创新”,在我们的设计师笔下,这不仅仅是一行字,而是化作了一个充满现代感的图标:中心是旋转的... 点击进入详情页
本回答由logo在线生成器提供
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式