伪选择器

Question

是否有伪选择器或方法来检测带有id的<section>标记。 I.E. <section id="no_display">？

我有一个标题，它的底部边距为35px。但是，我不想在一个页面上应用底部边距，但我想将其应用于所有其他页面。

是否有方法来检测ID并且不应用保证金？

<header>
    //stuff here
</header>
<section id="no_display">
    //other stuff here
</section>

因此，如果<header>后紧跟section id="no_display"，请不要应用下边距

希望这是有道理的。

Answer 1

您可以使用section的负余量来补偿其先前兄弟元素的margin-bottom：

#no_display {
    margin-top: -35px;
}

Answer 2

您通常不会使用pseudo-classes来表达两个或多个元素之间的关系;你使用combinators。在这种情况下，您需要一个前兄弟组合子。不幸的是，that doesn't exist。

以下兄弟组合器存在什么。由于如果section没有该ID，您真的只希望保证金在那里，您可以将header上的下边距切换为section上的上边距，并使用当它具有从中移除边距的ID时覆盖规则：

header + section {
    margin-top: 35px;
}

header + section#no_display {
    margin-top: 0;
}

（你真的不需要像header + section#no_display这样的选择器，因为只有ID足够具体，但这样做有助于我一眼就看出第二条规则与第一条规则有关。）