使用第 n 个孩子选择一个特定的兄弟姐妹

Question

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

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

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

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

这是 codepen 链接 - 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，因为它们在所有三个图像中都具有相同的class name。

.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>

Answer 2

更新

文本不透明度降低和最后一个子不透明度控制的问题已得到修复

CODEPEN

上的工作示例

HTML：

<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"></div>
    <p>Spring is here</p>
  </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"></div>
    <p>Winter is here</p>

  </div>


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

</div>

CSS：

.flexcontainer {
  display: flex;
}

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

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

.photocontainer p {
  position: absolute;
  font-size: 2em;
  color: white;
  font-family: verdana;
  text-align: center;
  top: 20px;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 5px;
  z-index: 1;
  transition: .5s;
  opacity: 0;
}

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

.photocontainer:hover p {
  transition-delay: .2s;
  transition-duration: 1s;
  opacity: 1;
}

.photocontainer:hover:last-child .overlay {
  opacity: 0.3;
}

旧：

.photocontainer:last-child .overlay:hover {
  opacity: 0.4;
}

我希望现在你的这两个问题都已经解决了。

享受:)

Answer 3

这是您定位它的方式。 opacity 值只是举例。

.photocontainer:last-child .overlay:hover {
  opacity: .3;
}

revised codepen

:last-child pseudo-class 以同一父级的最后一个兄弟为目标。

在您的 HTML 中，第三张图片包含在最后一个 .photocontainer div 中。

一旦焦点位于第三个容器上，您就可以使用descendant selector 来定位图像。

另外，请记住，opacity 属性不仅适用于目标元素，还适用于该元素的所有后代。

所以当你降低.overlay的不透明度时，里面的文字也会消失。

解决方法是使用rgba()颜色方法。 a 代表 Alpha 通道，允许您仅对颜色应用透明度。

将此添加到您的代码中：

.photocontainer:last-child .overlay:hover {
    background-color: rgba(0, 0, 0, 0.5); 
}

revised codepen illustrating both methods

（如果您将opacity 应用于图像，那就是另一场球赛了。您可以在此网站上找到很多关于该主题的帖子。）

参考资料：

• https://www.w3.org/TR/css3-selectors/#selectors
• https://developer.mozilla.org/en-US/docs/Web/CSS/opacity