Question

我正在使用猫头鹰旋转木马2并添加了自定义CSS：

$(document).ready(function() {
  $("#owl-demo").owlCarousel({
    navigation: true,
    pagination: true,
    lazyLoad: true
  });
});

#owl-demo .owl-item > div img {
  display: block;
  width: 100%;
  height: auto;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  margin-bottom: 4px;
}
#owl-demo .owl-item > div {
  padding: 0px 2px
}
#owl-demo .owl-item > div:first-child {
  border: 6px solid #e1e1e1;
}

<div id="owl-demo" class="owl-carousel">
  <div>
    <img class='lazyOwl' data-src="http://placehold.it/200x200/42bdc2/FFFFFF&text=1st Row" alt="" />
  </div>
  <div>
    <img class='lazyOwl' data-src="http://placehold.it/200x200/42bdc2/FFFFFF&text=1st Row" alt="" />
  </div>
  <div>
    <img class='lazyOwl' data-src="http://placehold.it/200x200/42bdc2/FFFFFF&text=1st Row" alt="" />
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.min.js"></script>
<link href="http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.css" rel="stylesheet" />
<link href="http://owlgraphic.com/owlcarousel/owl-carousel/owl.theme.css" rel="stylesheet" />

这对我有用，但我想使用:last-child或:first-child将CSS边框添加到第一个或最后一个div。在行动中，这不起作用，而是显示所有div的边框。

我该如何解决这个问题？

DEMO here

Answer 1

使用:first-child时，您的逻辑略有错误。使用div定位.owl-item内的:first-child会导致所有div被选中，因为它们是div中的第一个.owl-item。< / p>

您需要做的是使用:first-child查找.owl-item的第一个实例，然后定位其中的div。

需要进行以下更改：

将#owl-demo .owl-item > div:first-child更改为#owl-demo .owl-item:first-child div

$(document).ready(function() {
  $("#owl-demo").owlCarousel({
    navigation: true,
    pagination: true,
    lazyLoad: true
  });
});

#owl-demo .owl-item > div img {
  display: block;
  width: 100%;
  height: auto;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  margin-bottom: 4px;
}
#owl-demo .owl-item > div {
  padding: 0px 2px
}
#owl-demo .owl-item:first-child div {
  border: 6px solid #e1e1e1;
}

<div id="owl-demo" class="owl-carousel">
  <div>
    <img class='lazyOwl' data-src="http://placehold.it/200x200/42bdc2/FFFFFF&text=1st Row" alt="" />
  </div>
  <div>
    <img class='lazyOwl' data-src="http://placehold.it/200x200/42bdc2/FFFFFF&text=1st Row" alt="" />
  </div>
  <div>
    <img class='lazyOwl' data-src="http://placehold.it/200x200/42bdc2/FFFFFF&text=1st Row" alt="" />
  </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.min.js"></script>
<link href="http://owlgraphic.com/owlcarousel/owl-carousel/owl.carousel.css" rel="stylesheet"/>
<link href="http://owlgraphic.com/owlcarousel/owl-carousel/owl.theme.css" rel="stylesheet"/>

http://fiddle.jshell.net/wkh1mx2e/

：第一个孩子和：最后一个孩子没有在猫头鹰旋转木马2工作

1 个答案: