CSS规则来选择不包含元素的元素 [英] CSS rule to select an element which doesn't contain an element

问题描述

我有一堆看起来像的元素。

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

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

  #hi：hasno（.footer）{
 border-bottom：1px black dotted; 
} 
  

是否有CSS选择器可以用于此， a

您可以使用：empty

来选择不包含其他元素的元素。 code> selector，但是你需要的将不会可用，直到CSS4。所以不，它不能在纯CSS。现在是否应该使用JavaScript等价物取决于你真正想在这里实现。如果它是一个小细节，随意添加它与JavaScript，如果它不是太多的问题。如果它是一个巨大的，必要的功能，考虑重组，所以你不需要这种选择器。

I have a bunch of elements that look like..

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

..except some of them don't have the footer element, only a head. I want to give elements without a footer a bottom border. I'm hoping for something like..

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

Is there a CSS selector I could use for this, or should I just use a JavaScript equivalent?

解决方案

You can select elements that contain no other elements using the :empty selector, but what you need won't be available until CSS4. So no, it can't be done in pure CSS. Now whether or not you should use a JavaScript equivalent depends on what you really want to achieve here. If it's a minor detail, feel free to add it with JavaScript if it's not too much of a problem. If it's a huge, essential feature, consider restructuring so you don't need this kind of selector.

这篇关于CSS规则来选择不包含元素的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！