parent 而不是 child 的CSS样式？

Question

我正在使用 jquery 将从服务器获取的 html 插入到 div 中。根据 div 内容，我想调整容器的样式。我写了一个简单的 html 测试。当它有 X child 时，我如何告诉 css 应用这个网站？谷歌搜索后，我尝试了 :has 和 :contains 两者都不起作用。我不想将我的样式保留在 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 的方式所致，通过引入它，性能会提高 10 倍(至少!)，因为它需要读取每个节点多次以查看它是否符合配置文件。

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