Html 选择元素后具有特定类的第一个同级

这个问题让我很困惑，因为它看起来很简单，但我无法解决这个问题

为了提供一点上下文，我准备了一个小的HTML应用程序，它根据最终用户选择的过滤器生成一个div列表。最终用户可以手动删除他不感兴趣的元素，基本上是通过JavaScript向元素添加“隐藏”类

问题是，其中一些元素的边框更大，当它们在屏幕上相邻时，边框会变得更厚，因此更难看。我设法解决了所有其他问题，但现在当我遇到类似情况时，我找不到正确的CSS选择器：

<div>...</div>
<div>...</div>
<div class="bigborders">...</div>
<div class="hidden">...</div>
<div class="hidden">...</div>
<div class="hidden">...</div>
<div class="bigborders">...</div>
<div>...</div>
<div class="bigborders">...</div>
<div>...</div>
<div>...</div>

我想只选择第一个

.bigborders

，然后再选择一个

.bigborders

，忽略中间所有隐藏的div，以删除其上边框，但兄弟的唯一选择器是

+

，它选择紧跟其后的元素（但这仅在屏幕上是正确的，而不是在代码中），以及

~

，这将选择下面的每个元素（但我只需要第一个元素，而不是每个元素）。我还试验了

：类型的第一个

和类型的第n个，但是这个伪类是针对第一个

.bigborders

的父元素工作的，而不是该元素本身

---

还有其他我看不见的方法吗？

不要担心视觉上相邻的

.bigborders

。只需回到HTML，并感谢您实际上非常接近解决方案。将相邻同级选择器

+

与.hidden类一起使用。请参见下面的CSS代码

.hidden {
    display: none;
}
.bigborders {
    border: 2px solid #AAAAAA;
}
.hidden+.bigborders {
    border-top: 0px;
    border-bottom: 2px solid #AAAAAA;
}

我已经为

.bigborders

类在4个面上应用了边框。但是，如果前面的元素是

.hidden

则会删除上边框以避免厚度问题。当然，如果您的第一个元素有一个隐藏类，而下一个元素是

.bigborders

，那么这将不起作用-但希望这是一个开始

---

.

我设法找到了一个解决方案，尽管这有点奇怪，需要一些灵活性。这一切都围绕着这样一个事实：边框实际上不必是CSS边框。两个其他div之间高度为3px的彩色div也可以作为边框

<div>...</div>
<div>...</div>
<div class="bigborder"></div>
<div>...</div>
<div class="bigborder"></div>
<div class="hidden">...</div>
<div class="hidden">...</div>
<div class="hidden">...</div>
<div class="bigborder"></div>
<div>...</div>
<div class="bigborder"></div>
<div>...</div>
<div>...</div>

这样我可以堆叠任意数量的大边框，它们都重叠。这并不是实现结果的最佳方式，但它没有使用JS，所以我很满意

---

我会等几天把它标记为解决方案，以防出现更好的解决方案。

第一个解决方案过于复杂

首先将上边框应用于所有图元

 border-top: 1px solid;

现在只有最后一项缺少底部边框，我们可以修复此问题使用

：last child

其次，将相关边框应用于

.bigBorders

元素

border-top: 3px solid blue;
border-bottom: 2px solid blue;

为什么

2px

在底部？因为其他元素有

1px

上边框，所以总和将是

3px

，它将等于

.bigBorders

的上边框

这一切都是为了使所有的边界更加均匀

现在我们应用

利润底部：-3px

on

.bigBorders

这只会影响底部的元素，就像我们在降低它们上面元素的高度一样

3px

等于将使边框重叠的元素的边框宽度

是的，边距技巧会影响内容，但只要值很小，就可以了

。隐藏{
显示：无；
}
div>div{
边框顶部：1px实心；
填充物：5px；
}
div>div：最后一个孩子{
边框底部：1px实心；
}
比格博兹先生{
边框顶部：3倍实心；
边框底部：2倍实心；
利润底部：-3px；
背景：橙色；
}

占位符
占位符
大边界
隐藏的
隐藏的
隐藏的
大边界
占位符
占位符
隐藏的
隐藏的
大边界
占位符
占位符
大边界
隐藏的
隐藏的
占位符
占位符
占位符
隐藏的
隐藏的
隐藏的
占位符
占位符
隐藏的
隐藏的
大边界
隐藏的
隐藏的
占位符
占位符
大边界
大边界
占位符
占位符
大边界
大边界
占位符
占位符
隐藏的
隐藏的
隐藏的
占位符
大边界
大边界
占位符

javascript允许吗？@BrightFaith我用JS解决这个问题没有问题，但如果有CSS替代方案，我会刻意避免。否则JS代码已经编写好了，我只需取消注释即可。@zer00ne正在处理它，对不起。@GRB我想你需要的是调查更多的例子@GRB我发布的链接包含香草JS以及jquery解决方案。（还有——这是“教的”，不是“想的”——对不起，我是个语言书呆子……）。祝你好运。对不起，我已经考虑过这个方法了。问题是，只有当两个元素之间的所有元素都隐藏时，上边界才会消失。大边界是隐藏的，而不仅仅是最后一个。如果我删除代码第4行或第5行的隐藏类，上边框不会消失。它工作得很好，也很简单。非常感谢@GRB I简化了解决方案。

 border-top: 1px solid;

border-top: 3px solid blue;
border-bottom: 2px solid blue;