javascript - :first-child and :last-child not working in owl carousel 2

Question

我正在使用 Owl carousel 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 的边框。

我该如何解决这个问题？

演示 here

Answer 1

使用 :first-child 时你的逻辑有点错误。使用 :first-child 定位 .owl-item 内的 div 将导致选择所有 div因为它们是 .owl-item 中的第一个 div。

您需要做的是使用 :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/