如果下一个项目属于特定类，则将border-bottom设置为另一种颜色

Question

发生了什么

我遇到了问题。我有这样的菜单：

<div id='feeds'>
  <div class='feed'>Super Dense</div>
  <div class='feed'>Everything</div>
  <div class='feed current-feed'>Smashing Magazine Feed</div>
  <div class='feed'>Hot Questions - Stack Exchange</div>
</div>

我用CSS设置它（我只在这里显示边框和背景属性）：

.feed {
  background: -webkit-gradient(linear, left top, left bottom, from(#DDD), to(#CCC));
  border-bottom: solid 1px #AAA;
  border-left: solid 1px #AAA;
  border-right: solid 1px #AAA;
}

.feed:first-child {
  border-top: solid 1px #AAA;
}

.feed.current-feed, .feed:active {
  background: -webkit-gradient(linear, left top, left bottom, from(#333), to(#444));
  border-bottom: solid 1px #000;
  border-left: solid 1px #000;
  border-right: solid 1px #000;
}

.feed.current-feed:first-child, .feed:active:first-child {
  border-top: solid 1px #000;
}

这是结果（仅view on jsFiddle WebKit）：

_{是的，Jeff，所有额外的Stack Exchange Feed流量来自我不断重新加载我的Feed阅读器。对不起：）}

问题

这看起来不错，但有一点问题。在黑盒子上方有一条#AAA线，这看起来不太好（像素完美）：

我的问题

CSS中是否有办法检查下一个元素是否属于某个类，因此我可以将border-bottom设置为solid 1px #000，还是有其他方法可以解决我的问题？

我的网络应用程序大量使用JavaScript，因此如果需要，这不是问题，但我认为CSS更清晰。

Answer 1

我能想到的一种方式：

相对地定位每个.feed：

.feed {
    position: relative;
    /* ... */
}

然后使用+组合子找到下一个直接兄弟姐妹，使用更大的z-index和负边距让它位于其上一个兄弟之上，并给它所需的边界（注意这是一个顶部边框）：

.feed + .feed.current-feed, .feed + .feed:active {
    margin-top: -1px;
    border-top: 1px solid #000;
    z-index: 1;
}

顶部黑色边框将位于上一个兄弟的底部边框上方，因此可以在其上方看到。 W3C盒子模型意味着每个.feed的内容高度不受影响，因此您需要一个同样厚的负边距来抵消添加的顶部边框的厚度。

看看preview，看看你是否正在寻找。另外，截图：

Answer 2

您可以使用jQuery .parent()函数执行此操作：

http://api.jquery.com/parent/

JSFiddle