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

<强> Demo

Answer 3

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

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

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

CSS <img/>标记不应用父div类css样式

3 个答案: