根据元素的子元素将 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 功能。

原文由 M4N 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

语法是：

 div:has(div.a) { border: solid 3px red; }
div:has(div.b) { border: solid 3px blue; }

---

据我所知，基于子元素的父元素样式不是 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“有”选择器 的文档。

原文由 KP. 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

基本上，没有。以下 是 您在理论上所追求的：

 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年是很长的时间。

原文由 Justin Wignall 发布，翻译遵循 CC BY-SA 4.0 许可协议