CSS不适用于图片

Question

尝试将CS​​S应用于下面包含的图像（我已删除其他HTML代码以简化它）：

<div class="wrap">
 <main>
   <article>
     <img src="images/forest.jpeg" width="800px">
   </article>
 </main>
</div>

目前正尝试按如下方式应用CSS：

.wrap img {
  max-width: 100%;
}

Answer 1

看看css在这里施用

.wrap img{
  height: 400px;
  border: 5px solid black;
  border-radius: 10px;
  box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
  max-width: 100%;
}

<div class="wrap">
 <main>
   <article>
     <img src="http://sd.keepcalm-o-matic.co.uk/i-w600/keep-calm-400-level-loading-1.jpg" />
   </article>
 </main>
</div>

Answer 2

因为内联css比其他css具有更高的优先级。改变它：

<img src="images/forest.jpeg">

.wrap img {
   width:800px;
   max-width: 100%;
}

Answer 3

快速修复

.wrap > main > article > img{max-width: 100% !important;}