将样式应用于父项，如果它具有CSS的子项

我试图将styles应用于parent如果它有child元素。

到目前为止，我已经将样式应用于child元素（如果存在）。 但是，如果parent有child ，我只想用CSS来style parent的CSS 。

以下是html

 <ul class="main"> <li>aaaa</li> <li>aaaa</li> <li>aaaa</li> <li>aaaa</li> <li>aaaa <ul class="sub"> <li>bbbb</li> <li>bbbb <ul> <li>cccc</li> <li>cccc</li> <li>cccc</li> </ul> </li> <li>bbbb</li> <li>bbbb</li> <li>bbbb</li> </ul> </li> <li>aaaa</li> <li>aaaa</li> <li>aaaa</li> </ul> 

的css代码

 * { margin:0; padding:0; text-decoration:none; } .main li { display:inline-block; background:yellow; color:green; } .main > li > ul > li { background:orange } .main > li > ul > li > ul >li { background:pink; } 

工作FIDDLE

Answer 1

这是不可能的CSS3。 有一个build议的CSS4select器$ ，可以做到这一点，看起来像这样（selectli元素）：

 ul $li ul.sub { ... } 

在这里看到CSS4select器列表 。

作为替代scheme，使用jQuery，您可以使用一行代码：

 $('ul li:has(ul.sub)').addClass('has_sub'); 

然后，您可以继续在CSS中设置li.has_sub 。