CSS选择元件选择

Question

类

我修改JQuery用户界面折叠式菜单，目前有如下的结构后：

<h3>Title</h3> 
<div>Children</div> 
<h3 class="no-children">Title</h3> 
<div>Children</div> 
<h3>Title</h3> 
<div>Children</div> ... 

正如你可以看到，中级职称一直没有孩子，所以我想在CSS中做的事情是沿着选择在.no-children类之后发生的div并将其隐藏起来的。这些不是嵌套的，所以我不能简单地做到这一点。

我知道我可以display:none但我似乎无法选择正确的元素。

有没有办法做到这一点？

Answer 1

.nochildren+div{ 
    /* Style goes here */ 
} 

这将选择一个DIV其被立即通过与所述.nochildren类元素之前。这只有在两个元素处于同一级别时才有效，许多旧版浏览器都会遇到问题。

http://www.quirksmode.org/css/contents.html

Answer 2

如果您在使用jQuery有这样 Here

Answer 3

的一种简单的方法，您可以使用

$('.no-children').next().hide(); 

或.nextUntil();

http://jsfiddle.net/lollero/DqpPd/1/

---

CSS的方法是

.no-children + div { display: none; } 

http://jsfiddle.net/lollero/DqpPd/（IE7 +）