id标记

Question

如果id等于myCarousel，我怎样才能使这段代码有效？我顺便使用bootstrap。

我尝试添加#myCarousel标记，但它没有用。

.carousel {
  margin-top: -20px;
  height: 675px;
  margin-bottom: 70px;
}

.carousel-caption {
  z-index: 10;
  height: 350px;
}

.carousel .item {
  height: 675px;
  background-color: #777;
}
.carousel-inner > .item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 675px;
}

Answer 1

假设轮播既有标识myCarousel又有carousel类，您可以将它们组合在一起，而它们之间没有任何空格：

#myCarousel.carousel {
  ...
}

#myCarousel.carousel-caption {
  ...
}

#myCarousel.carousel .item {
  ...
}
#myCarousel .carousel-inner > .item > img {
  ...
}

对于最后一个（.carousel-inner），我认为它是#myCarousel的孩子，所以它们之间有空格。

有关此内容的详细信息，请参阅https://css-tricks.com/multiple-class-id-selectors/

Answer 2

以下内容将要求HTML元素具有ID myCarousel以及上面定义的类。

#myCarousel.carousel {
  margin-top: -20px;
  height: 675px;
  margin-bottom: 70px;
}

#myCarousel.carousel-caption {
  z-index: 10;
  height: 350px;
}

#myCarousel.carousel .item {
  height: 675px;
  background-color: #777;
}
#myCarousel .carousel-inner > .item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 675px;
}