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

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

到目前为止,我已经将样式应用于child元素(如果存在)。 但是,如果parentchild ,我只想用CSSstyle parentCSS

以下是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

One Solution collect form web for “将样式应用于父项,如果它具有CSS的子项”

这是不可能的CSS3。 有一个build议的CSS4select器$ ,可以做到这一点,看起来像这样(selectli元素):

 ul $li ul.sub { ... } 

在这里看到CSS4select器列表 。

作为替代scheme,使用jQuery,您可以使用一行代码:

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

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

  • 数据绑定锚标签的href属性
  • 浏览器/ HTML从src =“data:image / jpeg; base64 ...”强制下载图片
  • 是否有可能捕获CORS错误?
  • 我需要一个服务器来使用HTML5的WebSockets吗?
  • 使用CSS在hover的图像上创build缩放效果?
  • HTML5 - 如何stream大型.mp4文件?
  • HTML5 doctype把IE9进入怪癖模式?
  • Flexbox:水平和垂直居中
  • 将对象存储在HTML5 localStorage中
  • HTML5帆布摄像头/视口 - 如何行事呢?
  • HTML5 / Canvas支持双caching吗?