Question

我发现下一件事最好的方法是什么。

我想给每个部分一个边框底部，但是当有一个部分跟着一个特定的部分时，它不应该显示底部边框。

    <section></section> <!-- has border-bottom -->
    <section></section> <!-- THIS ONE SHOULD NOT HAVE A BORDER BOTTOM, BECAUSE UNDER THIS SECTION IS A SPECIFIC SECTION WITH A CLASS -->
    <section class="highlight"></section> <!-- has border-bottom -->
    <section></section> <!-- has border-bottom -->

Answer 1

由于没有先前的选择器，您可以通过在部分上添加边框顶部来伪造边框底部，而不是在section:first-of-type＆amp; .highlight类;另外，为:last-of-type添加一个底边框，如下所示：

section { border-top: 3px solid #aaa; }
section:first-of-type, .highlight { border-top: none; }
section:last-of-type { border-bottom: 3px solid #aaa; }
.highlight { background: yellow; }

JSFiddle

编辑：错别字＆amp;基本澄清。

Answer 2

您不会有CSS答案。因为在CSS中没有以前的子选择器，您可以使用它并应用于从该元素中删除边框。

检查下一个元素。你需要使用JavaScript。 CSS不会检查当前元素旁边的元素。

然而，您可以使用CSS来使用

选择特定的孩子

section:nth-of-type(2) {
  border: 0;
}

但请记住，您无法在CSS语言中应用条件。你需要JavaScript。

如何隐藏或显示边框

2 个答案: