我试图在css div类样式图像，但它不会为我工作.为什么会这样?

Question

我正在尝试用某种方式为一组图像或段落设置样式，

.products {
margin: 40px;
border-radius: 4px solid black;
}

<div class="products"> <img src="images/bodybutter1.jpg" style="width 250px; height: 300px; border-radius: 15px;" alt="bodybutter"> <img src="images/bodybutter1.jpg" style="width 250px; height: 300px; border-radius: 15px;" alt="bodybutter"> <img src="images/bodybutter1.jpg"
style="width 250px; height: 300px; border-radius: 15px;" alt="bodybutter"> <img src="images/bodybutter1.jpg" style="width 250px; height: 300px; border-radius: 15px;" alt="bodybutter"> </div>
<div class="products">
<img src="images/bodybutter1.jpg" style="width 250px; height: 300px; border-radius: 15px;" alt="bodybutter">
<img src="images/bodybutter1.jpg" style="width 250px; height: 300px; border-radius: 15px;" alt="bodybutter">
<img src="images/bodybutter1.jpg" style="width 250px; height: 300px; border-radius: 15px;" alt="bodybutter">
<img src="images/bodybutter1.jpg" style="width 250px; height: 300px; border-radius: 15px;" alt="bodybutter">
</div>

Answer 1

您需要将父div中的img标记作为目标，而不是将父div作为目标。参见下面的代码:

.products img {
margin: 40px;
border-radius: 4px solid black;
}

你可以用它来减少代码重复。

Answer 2

注意:内联的第一个属性缺少分号，会破坏代码。这可能就是为什么你没有看到这些样式应用到你的图像元素。

因为你对每个图像都使用相同的样式，所以你应该使用style属性删除那些内联样式，并使用CSS来针对这些元素。

查看上下文代码。希望这对你有帮助!

.products {
margin: 40px;
border-radius: 4px solid black;
}
.products img {
width: 250px;
height: auto;
border-radius: 15px;
object-fit: cover;
max-width: 100%;
}

<div class="products">
<img src="https://wtwp.com/wp-content/uploads/2015/06/placeholder-image.png" alt="bodybutter">
<img src="https://wtwp.com/wp-content/uploads/2015/06/placeholder-image.png" alt="bodybutter">
<img src="https://wtwp.com/wp-content/uploads/2015/06/placeholder-image.png" alt="bodybutter">
<img src="https://wtwp.com/wp-content/uploads/2015/06/placeholder-image.png" alt="bodybutter">
</div>
<div class="products">
<img src="https://wtwp.com/wp-content/uploads/2015/06/placeholder-image.png" alt="bodybutter">
<img src="https://wtwp.com/wp-content/uploads/2015/06/placeholder-image.png" alt="bodybutter">
<img src="https://wtwp.com/wp-content/uploads/2015/06/placeholder-image.png" alt="bodybutter">
<img src="https://wtwp.com/wp-content/uploads/2015/06/placeholder-image.png" alt="bodybutter">
</div>