访问嵌套内部 in CSS

Question

我正在尝试填充旋转木马背景图像填充旋转木马。但是我无法从css访问标签。

<div id="carouselSlider" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <!-- data-slide-to part -->
  </ol>

  <div class="carousel-inner">
    <div class="carousel-item active">
      <div class="carousel-background"><img src="img/portfolio/fullsize/1.jpg"></div>
      <div class="carousel-container">
        <div class="carousel-caption">
          <h2>We are xyz</h2>
          <p>We help you to blah blah blah!</p>
          <a href="#getstarted" class="btn btn-primary scrollto">Get Started</a>
        </div> <!--carousel-content-->
      </div> <!--carousel-container-->
    </div> <!--carousel-item-->

  <div class="carousel-item">
    <!-- similar content with <img>-->
  </div> <!--carousel-item-->

  <div class="carousel-item">
    <!-- similar content with <img>-->
   </div> <!--carousel-item-->

  </div> <!--carousel-inner-->
  <a class="carousel-control-prev" href="#carouselSlider" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselSlider" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div> <!--carousel-->

CSS文件：

#carouselSlider .carousel-inner .carousel-item .carousel-background img{
width: 100%;
height:400px;

}

我无法编辑图像。还有一种方法可以在不拉伸的情况下在旋转木马中填充图像吗？

Answer 1

您可以向图像添加类。那行代码看起来应该是这样的

<div class="carousel-background"><img class="whateveryouwant" src="img/portfolio/fullsize/1.jpg"></div>

Answer 2

您正尝试使用类导航嵌套结构，但这不是它的工作原理。因为您在carouselSlider div中只有一个图像，所以您可以使用以下方法访问它：

#carouselSlider img {<your css here>}

但是当你有更多的图像时，这可能会破裂。如果您可以更改该HTML，您应该将一个类添加到您的img或id到其中一个内部div并直接访问它。

要避免图像被拉伸，请查看“background-size”CSS属性。 “掩护”或“包含”应该为你做。