html - 使用第 n 个 child 选择一个特定的 sibling

Question

我在我的 codepen 演示中托管了来自 Google 的三张图片。

我构建了图像叠加层，当用户将鼠标悬停在图像叠加层上时，它会添加一个半透明的叠加层。

它们工作正常，但由于最后一个的颜色，悬停在上面时看起来比其他两个要暗得多。

我想知道是否有一种方法可以使用第 n 个子(或类似)选择器选择最后一张图像，这样我就可以用较低的不透明度来设置它的样式，而不管其他两个，我想保持不变。

这是代码笔链接 - http://codepen.io/skoster7/pen/ozgjmP?editors=1100

就像我说的，我希望最后一张图片的不透明度低于其他两张，最好使用 nth-child 选择器或类似的东西。

我知道我可以只使用具有不同类名的单独覆盖，但想知道在这样做之前是否可行。

.flexcontainer {
  display: flex;
}
.spr,
.wint,
.aut {
  width: 300px;
  height: 200px;
  margin: 5px;
}
.overlay {
  transition: .5s;
  position: absolute;
  margin: 12.5px 0 0 5px;
  top: 0;
  width: 300px;
  height: 200px;
  background: black;
  opacity: 0;
}
.overlay:hover {
  transition-delay: .2s;
  transition-duration: 1s;
  opacity: .6;
}
.overlay p {
  font-size: 2em;
  color: white;
  font-family: verdana;
  text-align: center;
}
.photocontainer:last-child .overlay:hover {
  rgba(20, 5, 5, 0.35);
  text-
}

<div class="flexcontainer">


  <div class="photocontainer">
    <img class="spr" src="http://www.thehealthyveggie.com/wp-content/uploads/2016/03/spring-daffodils_2845661b.jpg">
    <div class="overlay">
      <p>Spring is here</p>
    </div>
  </div>


  <div class="photocontainer">
    <img class="wint" src="http://www.outsideonline.com/sites/default/files/styles/full-page/public/winter-bucket-list-2015-igloos_h.jpg?itok=RbGFkDiq">
    <div class="overlay">
      <p>Winter is here</p>
    </div>
  </div>


  <div class="photocontainer">
    <img class="aut" src="http://www.idealmagazine.co.uk/wp-content/uploads/2013/10/Autumn-10.jpg">
    <div class="overlay">
      <p>Autumn is here</p>
    </div>
  </div>

</div>

Answer 1

这就是您如何使用 nth-child 定位它们中的每一个，我们定位父元素，即 .photocontainer，因为它们具有相同的 类名 在所有三个图像中。

.photocontainer:nth-child(1) > .overlay:hover {
  opacity: 0.4;
}
.photocontainer:nth-child(2) > .overlay:hover {
  opacity: 0.6;
}
.photocontainer:nth-child(3) >  .overlay:hover {
  opacity: 1;
}

.flexcontainer {
  display: flex; 
}

.spr,
.wint,
.aut {
  width: 300px; 
  height: 200px;
  margin: 5px; 
}

.overlay {
  transition: .5s; 
  position: absolute;
  margin: 12.5px 0 0 5px;
  top: 0;  
  width: 300px;
  height: 200px;
  background: black; 
  opacity: 0;   
  
}

.overlay:hover {
  transition-delay: .2s;
  transition-duration: 1s; 
}

.overlay p {
  font-size: 2em; 
  color: white;
  font-family: verdana; 
  text-align: center;  
}

.photocontainer:nth-child(1) > .overlay:hover {
  opacity: 0.4;
}
.photocontainer:nth-child(2) > .overlay:hover {
  opacity: 0.6;
}
.photocontainer:nth-child(3) >  .overlay:hover {
  opacity: 1;
}

    <div class="flexcontainer">


    <div class="photocontainer"> <img class="spr" src="http://www.thehealthyveggie.com/wp-content/uploads/2016/03/spring-daffodils_2845661b.jpg">
      <div class="overlay"><p>Spring is here</p>
      </div>
      </div>


    <div class="photocontainer">  <img class="wint" src="http://www.outsideonline.com/sites/default/files/styles/full-page/public/winter-bucket-list-2015-igloos_h.jpg?itok=RbGFkDiq">
      <div class="overlay"> <p>Winter is here</p>
      </div>
      </div>


      <div class="photocontainer"><img class="aut" src="http://www.idealmagazine.co.uk/wp-content/uploads/2013/10/Autumn-10.jpg">
        <div class="overlay"><p>Autumn is here</p>
     </div>
      </div>

    </div>