Html 根据其子元素将 CSS 样式应用于元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2326499/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Apply CSS styles to an element depending on its child elements
提问by M4N
Is it possible to define a CSS style for an element, that is only applied if the matching element contains a specific element (as the direct child item)?
是否可以为元素定义 CSS 样式，仅当匹配元素包含特定元素（作为直接子项）时才应用？
I think this is best explained using an example.
我认为这最好用一个例子来解释。
Note: I'm trying to style the parent element, depending on what child elements it contains.
注意：我正在尝试设置父元素的样式，具体取决于它包含的子元素。
<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>
Note 2: I know I can achieve this using javascript, but I just wondered whether this is possible using some unknown (to me) CSS features.
注 2：我知道我可以使用 javascript 来实现这一点，但我只是想知道这是否可以使用一些未知的（对我而言）CSS 功能。
采纳答案by KP.
As far as I'm aware, styling a parent element based on the child element is not an available feature of CSS. You'll likely need scripting for this.
据我所知，基于子元素的父元素样式不是 CSS 的可用功能。您可能需要为此编写脚本。
It'd be wonderful if you could do something like div[div.a]or div:containing[div.a]as you said, but this isn't possible.
这将会是美好的，如果你可以不喜欢div[div.a]或者div:containing[div.a]像你说的，但是这是不可能的。
You may want to consider looking at jQuery. Its selectors work very well with 'containing' types. You can select the div, based on its child contents and then apply a CSS class to the parent all in one line.
您可能需要考虑查看jQuery。它的选择器适用于“包含”类型。您可以根据其子内容选择 div，然后在一行中将 CSS 类应用于父项。
If you use jQuery, something along the lines of this would may work (untested but the theory is there):
如果你使用 jQuery，那么类似的东西可能会起作用（未经测试，但理论在那里）：
$('div:has(div.a)').css('border', '1px solid red');
or
或者
$('div:has(div.a)').addClass('redBorder');
combined with a CSS class:
结合 CSS 类：
.redBorder
{
border: 1px solid red;
}
Here's the documentation for the jQuery "has" selector.
这是jQuery“has”选择器的文档。
回答by Justin Wignall
Basically, no. The following wouldbe what you were after in theory:
基本上，没有。以下将是您在理论上所追求的：
div.a < div { border: solid 3px red; }
Unfortunately it doesn't exist.
不幸的是它不存在。
There are a few write-ups along the lines of "why the hell not". A well fleshed out one by Shaun Inman is pretty good:
有一些关于“为什么不”的文章。肖恩·英曼（Shaun Inman）充实的一个非常好：
http://www.shauninman.com/archive/2008/05/05/css_qualified_selectors
http://www.shauninman.com/archive/2008/05/05/css_qualified_selectors
回答by Mauricio Morales
On top of @kp's answer:
在@kp 的回答之上：
I'm dealing with this and in my case, I have to show a child element and correct the height of the parent object accordingly (auto-sizing is not working in a bootstrap header for some reason I don't have time to debug).
我正在处理这个问题，在我的情况下，我必须显示一个子元素并相应地更正父对象的高度（由于某种原因，自动调整大小在引导程序标头中不起作用，我没有时间调试） .
But instead of using javascript to modify the parent, I think I'll dynamically add a CSS class to the parent and CSS-selectively show the children accordingly. This will maintain the decisionsin the logic and not based on a CSS state.
但不是使用 javascript 来修改父级，我想我会动态地向父级添加一个 CSS 类，并相应地通过 CSS 选择性地显示子级。这将维护逻辑中的决策，而不是基于 CSS 状态。
tl;dr;apply the aand bstyles to the parent <div>, not the child (of course, not everyone will be able to do this. i.e. Angular components making decisions of their own).
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>
回答by miles
In my case, I had to change the cell padding of an element that contained an input checkbox for a table that's being dynamically rendered with DataTables:
就我而言，我必须更改包含输入复选框的元素的单元格填充，该元素正在使用 DataTables 动态呈现的表格：
<td class="dt-center">
<input class="a" name="constCheck" type="checkbox" checked="">
</td>
After implementing the following line code within the initCompletefunction I was able to produce the correct padding, which fixed the rows from being displayed with an abnormally large height
在initComplete函数中实现以下行代码后，我能够生成正确的填充，从而修复了以异常大高度显示的行
$('tbody td:has(input.a)').css('padding', '0px');
Now, you can see that the correct styles are being applied to the parent element:
现在，您可以看到正确的样式被应用于父元素：
<td class=" dt-center" style="padding: 0px;">
<input class="a" name="constCheck" type="checkbox" checked="">
</td>
Essentially, this answer is an extension of @KP's answer, but the more collaboration of implementing this the better. In summation, I hope this helps someone else because it works! Lastly, thank you so much @KP for leading me in the right direction!
从本质上讲，这个答案是@KP 答案的延伸，但实施的协作越多越好。总而言之，我希望这对其他人有所帮助，因为它有效！最后，非常感谢@KP 带领我走向正确的方向！
