父级而不是子级的CSS样式？

我使用jquery将从服务器获得的html插入到div中。根据div内容，我想调整容器的syle。我编写了一个简单的html测试。我如何告诉css应用这个网站，当它有X个孩子？在谷歌搜索之后，我尝试了：has和：contains，两者都不起作用。我不想在JS中保留我的样式，因为css更有意义

演示：

html

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

---

注意。

您无法在CSS中遍历DOM。您将需要使用JavaScript

以下是一篇解释原因的文章：

长话短说，这是由于浏览器读取CSS的方式，通过引入CSS，它将使性能提高十倍（至少！），因为它需要多次读取每个节点，以查看它是否符合配置文件

---

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

CSS还没有父选择器，有计划，但正在讨论中。在CSS选择器级别4中，a允许您以这种方式引用元素：

ol! > li:only-child

它的内容是：“一个

ol

元素，它包含一个

li

元素”（虽然这个语法是一个建议），并且可以让您设置父

ol

元素的样式

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

---

在主题选择器成为标准之前，Javascript是目前的发展方向。

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

但使用jQuery可以很容易地做到这一点，如下所示：

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

---

使用jQuery很容易。我不确定它是否可以在纯CSS中完成。1）在CSS中不可能2）为什么在同一个HTML中有两个

#a

？很有趣！一个明确的+1。我会试试的，虽然我不确定…@BoltClock:哦，接得好！我想这应该是一个类，但在我的真实代码中，它是一个id和b/c插入的。你最好不要对不同的元素使用相同的id。如果它是

#a

的直接子元素，这将设置

#b

。我认为这与OP寻求的恰恰相反。

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

ol! > li:only-child

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