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

Question

我有一堆看起来像...

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

除了一些没有页脚元素，只有页头的元素。我想给没有页脚的元素添加底部边框。我希望像这样做...

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

有没有CSS选择器可以用来实现这个效果，还是我应该使用JavaScript的替代方案？

- McKayla

---

不是重复，但是https://dev59.com/S3NA5IYBdhLWcg3wUL9Y - BoltClock

Answer 1

您可以使用:empty选择器选择不包含其他元素的元素，但是要实现CSS选择器4级中的:has和:not(selector list)需要在浏览器中实现。因此，不能仅使用纯CSS实现。现在，是否应该使用JavaScript等效方法取决于您真正想要实现什么。如果这只是一个小细节，如果不会带来太多问题，可以自由地使用JavaScript添加它。如果这是一个重要的功能，请考虑重新构建，以避免需要使用此类选择器。

- Ry-

---

强制性的jQuery宣传 $('#hi:not(:has(.footer))') - BoltClock

答案已经在2012年给出。现在是2022年，十年已经过去了。:not() 已经有点到位了，但 :has() 还没有。jQuery 的宣传比以前更加无关紧要了。是否出现了一些新的、仅基于 CSS 的方法来实现 .hi:has(.head)？ - Sixtyfive

@Sixtyfive：：has 在当前版本的 Chrome 中得到支持，在 Firefox 中需要启用标志才能使用。除此之外，不支持。 - Ry-

Answer 2

根据您的背景情况，您可以永久地将边框放在#hi上，并通过给footer添加margin-bottom: -1px或position: relative; bottom: -1px;来覆盖它，并在出现footer时隐藏边框。

- ScottS