根据子元素将CSS样式应用于元素[重复]

Posted 2023-03-06

【中文标题】根据子元素将CSS样式应用于元素[重复]

【英文标题】：Apply CSS styles to an element depending on its child elements [duplicate]

【发布时间】：2011-01-20 13:19:13

【问题描述】：

是否可以为元素定义 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 功能。

【问题讨论】：

您可能希望更新问题以说明您正在尝试设置 PARENT div 的样式，而不是其子项。我知道信息就在问题本身中，但除非你想得到大量不正确的答案，否则这可能是值得的。

谢谢@Seth。我试图改进问题的标题和文字。如果您认为问题仍然不清楚，请编辑问题。

这是一个完美的例子，说明为什么 CSS 中的这种类型的支持是理想的：ol < li:nth-child(n+10) margin-left: 2rem; ol < li:nth-child(n+100) margin-left: 3rem; ol < li:nth-child(n+1000) margin-left: 4rem; 在理想的世界中，这将增加 ol 的边距，具体取决于 li 的数量子元素包含在内，这样左边的边距就只有它需要的宽度了。

实际上这个功能正在使用 :has 选择器 - bkardell.com/blog/canihas.html

【参考方案1】：

据我所知，基于子元素的父元素样式不是 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 "has" selector 的文档。

【讨论】：

旁注：为了获得更好的性能，:has 选择器的 jQuery 文档页面建议使用 .has() 方法 (api.jquery.com/has) => 应用于当前问题，例如 $('div').has('div.a').css('border', '1px solid red');

为此，必须使用突变观察器来检查孩子是否改变了它的状态......

这并不能真正回答“有没有办法用 CSS 做到这一点”的问题。它清楚地表明：“我知道我可以使用 javascript 来实现这一点，但我只是想知道这是否可以使用一些（对我而言）未知的 CSS 功能。”

developer.mozilla.org/en-US/docs/Web/CSS/:has，我认为这个:has 选择器可以工作，但它是草稿版本，没有浏览器支持它。

【参考方案2】：

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

div.a < div  border: solid 3px red; 

不幸的是它不存在。

有一些关于“为什么不呢”的文章。肖恩·英曼（Shaun Inman）充实的一篇非常好：

http://www.shauninman.com/archive/2008/05/05/css_qualified_selectors

【讨论】：

只是 8 年后的更新：仍然不支持这种选择器方法。

有一个:has()伪类形式的工作草案，但我们只能在CSS4中使用它。截至目前（2019 年末），JS 仍然是实现这一功能的唯一途径。

我相信这不会启用 css 样式，它仍然需要 javascript 才能使用选择器。除非这已经改变？

9 年了，他们觉得这个功能没必要吗？

11 年了，我和其他许多人仍在寻找解决方案！

【参考方案3】：

在@kp 的回答之上：

我正在处理这个问题，在我的情况下，我必须显示一个子元素并相应地更正父对象的高度（由于某种原因，自动调整大小在引导标题中不起作用，我没有时间调试）。

但不是使用 javascript 来修改父级，我想我会动态地向父级添加一个 CSS 类，然后 CSS 选择性地相应地显示子级。这将在逻辑中维护 decisions，而不是基于 CSS 状态。

tl;dr; 将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>

【参考方案4】：

在我的例子中，我必须更改一个元素的单元格填充，该元素包含一个输入复选框，用于使用 DataTables 动态呈现的表格：

<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 引导我朝着正确的方向前进！