css - CSS标签不应用父div类css样式

Question

谁能向我解释为什么我的左右箭头图像没有进行任何在他们的课堂上完成的 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;
}

Answer 1

您需要将特定样式应用于img元素本身。

例如，如果您的问题是图像上出现边框，您需要执行以下操作：

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

请注意，我没有包含.carousel-prev或.carousel-next在选择器中，因此此规则将适用于两者

Answer 2

你应该image这样定位

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

演示

Answer 3

因为您设计了 div，而不是 img 标签。你应该添加

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

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