CSS规则选择不包含元素的元素

Question

我有一堆看起来像......

的元素

<div id="hi">
    <div class="head">
    </div>
    <div class="footer">
    </div>
</div>

..除了其中一些没有页脚元素，只有一个头。我想给没有页脚的元素提供底部边框。我希望有类似的东西..

#hi:hasno(.footer) {
    border-bottom: 1px black dotted;
}

我是否可以使用CSS选择器，或者我应该使用等效的JavaScript？

Answer 1

根据您的背景情况，您可以永久性地将边框设置在#hi上，然后通过footer footer或margin-bottom: -1px或position: relative; bottom: -1px;将其与{{1}}重叠。 {{1}}并在页脚存在时隐藏边框。

Answer 2

您可以使用:empty选择器选择不包含其他元素的元素，但在CSS4之前，您所需要的内容将不可用。所以不，它不能在纯CSS中完成。现在，您是否应该使用等效的JavaScript取决于您真正想要实现的目标。如果它是一个小细节，如果它没有太多问题，请随意添加JavaScript。如果它是一个巨大的基本功能，请考虑重组，这样您就不需要这种选择器了。