根据元素的子元素将CSS样式应用于元素

Question

是否可以为元素定义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实现这一点,但我只是想知道这是否可能使用一些未知(对我来说)CSS功能.

Answer 1

据我所知,基于子元素设置父元素的样式不是CSS的可用特性.您可能需要为此编写脚本.

这将会是美好的,如果你可以不喜欢div[div.a]或者div:containing[div.a]像你说的,但是这是不可能的.

您可能需要考虑查看jQuery.它的选择器与'包含'类型一起工作得非常好.您可以根据子内容选择div,然后在一行中将CSS类应用于父级.

如果你使用jQuery,那么就可以使用某些东西(未经测试,但理论就在那里):

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

要么

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

结合CSS类:

.redBorder
{
    border: 1px solid red;
}

这是jQuery"has"选择器的文档.

Answer 2

基本上没有.下面将是你是什么理论后:

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

不幸的是它不存在.

有一些关于"为什么不是"的说法.Shaun Inman的一个很好的装扮是非常好的:

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