求助：CSS中同一ID下多张图片如何单独调整尺寸

嘿，刚入门HTML/CSS遇到这个问题太正常啦！别担心，咱们一步步来解决～

你现在的CSS代码#main-header img { height: 4%; width: 4%; }会把#main-header下所有图片都设置成一样的尺寸，所以没法单独调整。这里有几个简单的办法，你可以选适合自己的：

方法1：给图片添加Class（最推荐，因为class可以复用） #

Class是给元素分组设置样式的好工具，你可以给每张图片加不同的class，然后针对性写CSS：

修改后的HTML：

<div id="main-header">
 <img src="../resources/wsimplylogo.png" class="small-logo" />
 <img src="../resources/wsimply.png" class="large-logo" />
</div>

对应的CSS：

#main-header { background-color: #453e32; }
/* 第一张图的尺寸 */
#main-header .small-logo { height: 4%; width: 4%; }
/* 第二张图的尺寸 */
#main-header .large-logo { height: 8%; width: 8%; } /* 这里改成你想要的尺寸 */
#main-header h1 { color: #F8D115; padding-left: 1%; font-family: Calibri; }

方法2：给图片添加独立ID #

如果每张图片只需要独特的样式，也可以给它们加单独的id（注意一个页面里id不能重复）：

HTML修改：

<div id="main-header">
 <img src="../resources/wsimplylogo.png" id="wsimply-logo" />
 <img src="../resources/wsimply.png" id="wsimply-text" />
</div>

CSS：

#main-header { background-color: #453e32; }
#wsimply-logo { height: 4%; width: 4%; }
#wsimply-text { height: 10%; width: 10%; } /* 自定义尺寸 */
#main-header h1 { color: #F8D115; padding-left: 1%; font-family: Calibri; }

方法3：用CSS子选择器（不用改HTML） #

如果不想修改现有HTML，可以用:nth-child()选择器直接定位第几张图片：

CSS修改：

#main-header { background-color: #453e32; }
/* 选择第一个img元素 */
#main-header img:nth-child(1) { height: 4%; width: 4%; }
/* 选择第二个img元素 */
#main-header img:nth-child(2) { height: 6%; width: 6%; }
#main-header h1 { color: #F8D115; padding-left: 1%; font-family: Calibri; }

选哪个方法都可以，新手可以先从Class开始练，这是CSS里非常常用的技巧～慢慢摸索多写几次就熟练啦！

内容的提问来源于stack exchange，提问作者Abdurahman Hijazi