将CSS样式应用于元素,具体取决于其子元素

是否有可能为一个元素定义一个CSS样式,只有在匹配元素包含特定元素(作为直接子项)时才应用该样式。

我觉得这个最好用一个例子来解释。

注意 :我正在尝试对父元素进行样式设置 ,具体取决于它包含的子元素。

<style> /* note this is invalid syntax. I'm using the non-existing ":containing" pseudo-class to show what I want to achieve. */ div:containing div.a { border: solid 3px red; } div:containing div.b { border: solid 3px blue; } </style> <!-- the following div should have a red border because if contains a div with class="a" --> <div> <div class="a"></div> </div> <!-- the following div should have a blue border --> <div> <div class="b"></div> </div> 

注2 :我知道我可以实现这个使用JavaScript,但我只是想知道这是否可能使用一些未知(对我)的CSSfunction。

据我所知,基于子元素的父元素的样式不是CSS的可用function。 你可能需要脚本来做到这一点。

如果你可以按照你所说的那样做div[div.a]或者div:containing[div.a] ,那将会很棒,但是这是不可能的。

你可能要考虑看jQuery 。 它的select器在“包含”types中工作得很好。 您可以根据其子内容selectdiv,然后在一行中对父级应用CSS类。

如果你使用jQuery,沿着这个线可能会工作(未经testing,但理论在那里):

 $('div:has(div.a)').css('border', '1px solid red'); 

要么

 $('div:has(div.a)').addClass('redBorder'); 

结合一个CSS类:

 .redBorder { border: 1px solid red; } 

这里是jQuery“has”select器的文档。

基本上没有。 以下是你理论之后的事情:

 div.a < div { border: solid 3px red; } 

不幸的是,它不存在。

有一些“为什么不到”的说法。 肖恩·英曼(Shaun Inman)的一口井很好,

http://www.shauninman.com/archive/2008/05/05/css_qualified_selectors

在@ kp的回答之上:

我正在处理这个,在我的情况下,我必须显示一个子元素,并相应地修改父对象的高度(由于某些原因,我没有时间去debugging自动resize在引导标题中) 。

但是,而不是使用JavaScript来修改父,我想我会dynamic地添加一个CSS类的父母和CSS – 有select地显示相应的孩子。 这将保持逻辑决策而不是基于CSS状态。

TL;博士;ab样式应用到父<div> ,而不是孩子(当然,不是每个人都可以做到这一点,即angular组件自己做决定)。

 <style> .parent { height: 50px; } .parent div { display: none; } .with-children { height: 100px; } .with-children div { display: block; } </style> <div class="parent"> <div>child</div> </div> <script> // to show the children $('.parent').addClass('with-children'); </script>