從類樹中選擇img

Question

努力改變圖像的大小。

<div class="mypage"> 
<div class="mypage-block"> 
<div class="mypage-image"> 
<a href="/mylink"> 
<img alt="" src="mypic.jpg" style="width: 180px; height: 180px;"></a></div> 

這是我曾嘗試

.page .page-block .page-image img { 
width: 140px; 
height: 140px; 
} 

當我檢查在Chrome它顯示了這個IMG值爲「element.style」設置爲180像素，這是我有問題，壓倒一切的價值。

Answer 1

刪除內聯樣式...它通常會在CSS表格之後獲勝，因爲它會因此具有優先級。

如果需要絕對您可以通過添加!important聲明強制樣式表「贏」，但不推薦使用它。

img { 
 
    width: 140px; 
 
    height: 140px; 
 
}

<img src="http://lorempixel.com/output/city-q-c-180-180-5.jpg" style="width: 180px; height: 180px;" alt=""> 
 

 
<img src="http://lorempixel.com/output/city-q-c-180-180-5.jpg" alt="">

Answer 2

img元素上的內嵌樣式是壓倒你的CSS樣式。

爲了解決這個問題（假設您無法從img元素中刪除內聯樣式），您需要在您的CSS屬性中添加一個！重要的減速度。

你在你的CSS文件中的類也不匹配那些在你的HTML

.mypage .mypage-block .mypage-image img { 
width: 140px !important; 
height: 140px !important; 
}