移动图像在单独的css类移动其他图像

Question

我目前正在一个react项目上工作，我有一个问题，当我试图在一个单独的css类中添加填充到页面底部的一些图像时，它正在移动主图像在我的页面顶部。

的第一形象

<div className="self--image">
<img src={Me} alt="Me"/>
</div>

新图像

<div className="bottom--cont">
<a href="https://github.com/mm2023git">
<img src={github} alt="Github"/>
</a>
<a href="https://www.instagram.com/mokelmoo/">
<img src={insta} alt = "Instagram"/>
</a>
</div>

css

.self--image > img{
width: 317px;
}
.bottom--cont{
background-color: #161619;
position: relative;
top: -47px;
}
.bottom--cont > a, img{
width: 25px;
display: inline-block;
position: relative;
padding-left: 20px;
}

我如何调整这一点，所以当我添加填充或定位到其他图像它不影响我的主图像?

Answer 1

基本上错误是在.bottom--cont > a, img，这里你说要添加样式到.bottom--cont类，然后添加样式到所有img标签，你需要像这样分隔选择器

.bottom--cont > img, .bottom--cont > a

.self--image > img {
width: 317px;
}
.bottom--cont {
background-color: #161619;
position: relative;
top: -47px;
}
.bottom--cont > img, .bottom--cont > a {
width: 25px;
display: inline-block;
position: relative;
padding-left: 60px;
}

<div class="self--image">
<img src="https://picsum.photos/id/3/400/400" alt="Me" />
</div>

<div class="bottom--cont">
<a href="https://github.com/mm2023git">
<img src="https://picsum.photos/id/1/50/50" alt="Github" />
</a>
<a href="https://www.instagram.com/mokelmoo/">
<img src="https://picsum.photos/id/1/50/50" alt="Instagram" />
</a>
</div>