为什么img不采用父级的全部宽度？

Question

.landing{
        position: inherit;
        width: 100%;
        height: 80vh;
        z-index: 0;
    }
    
    .landing  .wrapper + img{
        width: 100%;
    }

<div class="landing"> 
  <div class="wrapper"> 
    <img src="http://lorempixel.com/350/100/" alt="Our Building">
    <img src="http://lorempixel.com/350/100/" alt="LOGO"> 
  </div> 
</div>

我想要的是该图像应包含其父图像，请帮帮我。预先感谢

Answer 1

您可以使用first-child元素：

.landing{
    position: inherit;
    width: 100%;
    height: 80vh;
    z-index: 0;
}

.landing .wrapper img:first-child {
    width: 100%;
}

<div class="landing">
    <div class="wrapper">
        <img src="https://via.placeholder.com/350x100" alt="Our Building">
        <img src="https://via.placeholder.com/350x100" alt="LOGO">
    </div>
</div>

Answer 2

.wrapper + img在此HTML结构中找到一个img：

<div class="wrapper"></div>
<img src="..." />

+是相邻的兄弟（或邻居）选择器，并在同一DOM级别上查找下一个元素。

如果您要定位所有img的后代wrapper，请使用后代选择器（空格字符）：

.landing  .wrapper img{
    width: 100%;
}

如果仅要定位作为img的子对象的第一个.wrapper，请使用>（子选择器）和:first-of-type伪选择器的组合： / p>

.landing  .wrapper > img:first-of-type {
    width: 100%;
}