父母而不是孩子的CSS风格？

Question

我正在使用jquery来插入从服务器进入div的html。基于div内容我想调整容器的syle。我写了一个简单的html测试。如何在有X子的情况下告诉css应用此网站？谷歌搜索后，我尝试：has和：包含既没有工作。我不想把我的风格保留在JS中，因为css更有意义。

演示：http://jsfiddle.net/wd9fk/

HTML

<div id="a"><div id="b">B</div></div>
<div id="a"><div id="c">C</div></div>

CSS

#a { height: 400px; border: 1px solid red;  }
#b { height: 200px; }
#a :has #b { height: 300px; border: 1px solid blue; }

Answer 1

你根本无法遍历CSS中的DOM。您需要使用JavaScript。

这篇文章解释了原因：http://snook.ca/archives/html_and_css/css-parent-selectors

长话短说，这是由于浏览器读取CSS的方式，并且通过引入它，它会将性能提高十倍（至少！），因为它需要读取每个节点多次查看它是否符合个人资料。

这是一个很好的想法，但它根本不可行。

Answer 2

还没有CSS的父选择器，有计划，但正在讨论它。在CSS选择器级别4中，subject selector has been proposed，这将允许您以这种方式引用元素：

ol! > li:only-child

然后读取：“包含单个ol元素的li元素”（此语法虽然是提案），但您可以设置父ol元素的样式。 / p>

如果此提案成功，主题选择器将在下一版本的CSS选择器中可用。

现在，Javascript是要走的路，直到主题选择器成为标准。

Answer 3

您无法遍历DOM以获取当前匹配元素的父选择器。

但是你可以像这样轻松地使用jQuery：

$('#Default a span.active').closest('.vehicle_details').css('background-color','#444');

<强> Fiddle Demo

Answer 4

#a > #b { height: 300px; border: 1px solid blue; }

不确定这是否是你想要的，但试一试。

问候。