Question

我刚刚开始学习HTML和CSS，我正在实施我学到的所有技术。我遇到了一个问题，我有两个图像位置在一个id下有2个不同的尺寸。但是，我不知道如何单独编辑它们。这是我的HTML代码：

＆＃13;

#main-header {
  background-color: #453e32;
}

#main-header img {
  height: 4%;
  width: 4%;
}

#main-header h1 {
  color: #F8D115;
  padding-left: 1%;
  font-family: Calibri;
}

＆＃13;

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

＆＃13;

编辑图像尺寸时，我无法专门编辑图像尺寸而且我不知道是否应该单独创建另一个ID或者任何帮助，将不胜感激！ PS我真的才开始！

Answer 1

使用选择器#main-header img时，您可以使用ID main-header定位div中的所有img标记。这意味着，如果不使用更柔和的东西，则无法定位特定图像。

如果您只是学习css和html，我建议您为每个图片分别提供一个id（或类）。

但如果你真的想学习，那么你可以使用:nth-child()作为选择器：

#main img:nth-child(1){
  /*here be style of 1st image*/
}

有关详细信息，请参阅https://www.w3schools.com/cssref/sel_nth-child.asp

Answer 2

尝试使用相邻的兄弟选择器+ css选择器。

<强> The adjacent sibling combinator (+) separates two selectors and matches the second element only if it immediately follows the first element, and both are children of the same parent element.

同时删除html中的结束</img>标记。不需要它

#main-header {
  background-color: #453e32;
}

#main-header img {
  height: auto;
  max-width: 100%;
  vertical-align: middle;
}

#main-header img+img { /*for the second image followed by image*/
  width: 50px;
}

<div id="main-header">
  <img src="http://lorempixel.com/100/100/sports">
  <img src="http://lorempixel.com/100/100/food">
</div>

在css中调整相同id下的多个图像的大小

2 个答案: