是否可以为元素定义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特性。
在@kp的答案上面:
我正在处理这个问题，在我的情况下，我必须显示一个子元素，并相应地纠正父对象的高度(自动大小调整在引导标头中不起作用，出于某种原因，我没有时间调试)。
但是我没有使用javascript来修改父类，而是动态地向父类添加一个CSS类，并选择性地相应地显示子类。这将在逻辑中维护决策，而不是基于CSS状态。
tl,博士;将a和b样式应用到父对象<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>
它的语法是:
div:has(div.a) { border: solid 3px red; }
div:has(div.b) { border: solid 3px blue; }
据我所知，基于子元素的父元素样式化并不是CSS的一个可用特性。为此，您可能需要编写脚本。
如果你能做一些像div[div]这样的东西，那就太好了。A]或div:包含[div.]A，正如你所说，但这是不可能的。
您可能会考虑考虑jQuery。它的选择器非常适合“包含”类型。您可以根据它的子内容选择div，然后在一行中将CSS类应用到父类。
如果你使用jQuery，沿着这条线的东西可能会工作(未经测试，但理论是存在的):
$('div:has(div.a)').css('border', '1px solid red');
or
$('div:has(div.a)').addClass('redBorder');
结合CSS类:
.redBorder
{
border: 1px solid red;
}
下面是jQuery“has”选择器的文档。
在@kp的答案上面:
我正在处理这个问题，在我的情况下，我必须显示一个子元素，并相应地纠正父对象的高度(自动大小调整在引导标头中不起作用，出于某种原因，我没有时间调试)。
但是我没有使用javascript来修改父类，而是动态地向父类添加一个CSS类，并选择性地相应地显示子类。这将在逻辑中维护决策，而不是基于CSS状态。
tl,博士;将a和b样式应用到父对象<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>
基本上,没有。以下是你在理论上想要的:
div.a < div { border: solid 3px red; }
不幸的是，它并不存在。
有几篇文章写的是“为什么不呢”。Shaun Inman的一篇文章非常精彩:
http://www.shauninman.com/archive/2008/05/05/css_qualified_selectors
更新。许多年后，:has已经到来，浏览器的支持正在增加。
https://developer.mozilla.org/en-US/docs/Web/CSS/:has
12年是很长的一段时间。
在我的例子中，我必须改变一个元素的单元格填充，该元素包含一个输入复选框，用于动态呈现的数据表:
<td class="dt-center">
<input class="a" name="constCheck" type="checkbox" checked="">
</td>
在initComplete函数中实现以下行代码后，我能够产生正确的填充，这可以固定显示高度异常大的行
$('tbody td:has(input.a)').css('padding', '0px');
现在，你可以看到正确的样式被应用到父元素:
<td class=" dt-center" style="padding: 0px;">
<input class="a" name="constCheck" type="checkbox" checked="">
</td>
从本质上讲，这个答案是@KP答案的扩展，但是实现这个答案的合作越多越好。总之，我希望这能帮助其他人，因为它是有效的!最后，非常感谢@KP为我指引了正确的方向!
