2012-10-10 58 views
0

任何人都可以向我解釋爲什麼我的左右箭頭圖像沒有在其類中完成任何css修改?CSS <img>標籤不應用父級div class css風格

HTML

<div class="carousel-controls"> 
    <div class="carousel-prev"><a href="#" > 
      <img src="http://localhost:4316/images/Left.png" alt="Previous"/></a></div> 
    <div class="carousel-next"><a href="#"> 
      <img src="http://localhost:4316/images/Right.png" alt="Next" /></a></div> 
    </div> 

CSS

#waterwheel-carousel-default .carousel-controls .carousel-prev { 
position:absolute; 
bottom:190px; 
left:180px; 
height:30px; 
width:30px; 
border:0px solid black; 
} 

#waterwheel-carousel-default .carousel-controls .carousel-next { 
position:absolute; 
bottom:190px; 
right:150px; 
height:30px; 
width:30px; 
border:0px solid black; 
} 

回答

2

您需要特定的樣式應用到img元素本身。

例如,如果你的問題是,邊框上出現的圖像,你需要做的:

#waterwheel-carousel-default .carousel-controls img { 
    border:0; 
} 

注意我沒有包含在選擇.carousel-prev.carousel-next,使這一規則將同時適用於

+0

因此,我給予div類的高度和寬度將不會適用於我的圖像類嗎? – mabus44

+1

@ mabus44不,您需要將樣式應用到元素本身。元素不會繼承其父元素的樣式。 – Curt

+0

:你清除了我的概念。謝謝! – mabus44

2

您應針對image這樣

#waterwheel-carousel-default .carousel-controls .carousel-prev img 

Demo

1

因爲你設計了div,而不是img標籤。 您應該添加

#waterwheel-carousel-default .carousel-controls .carousel-prev img { 
... 
} 

#waterwheel-carousel-default .carousel-controls .carousel-next img { 
... 
} 
+0

因此,我給予div類的高度和寬度將不會適用於我的圖像類嗎? - – mabus44

+0

它需要給div的高度和寬度,因爲它的位置是絕對的。位置絕對要求寬度和高度。但是你必須分別爲圖像添加高度和寬度。 – Alvarez