根据元素的子元素将CSS样式应用于元素
是否可以为元素定义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>CSSNote2CSS:我知道我可以使用javascript来实现这一点，但我只是想知道是否可以使用一些(对我来说)未知的特性。
回答 4
Stack Overflow用户
发布于 2010-02-24 22:13:21
据我所知，基于子元素设置父元素的样式不是CSS的一个可用特性。为此，您可能需要编写脚本。
如果你能像你说的那样做像div[div.a]或div:containing[div.a]这样的事情，那就太好了，但这是不可能的。
您可能需要考虑使用jQuery。它的选择器可以很好地处理“包含”类型。您可以根据div的子内容选择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的文档。
Stack Overflow用户
发布于 2010-02-24 22:19:14
基本上，不是。以下是你在理论上想要的东西：
div.a < div { border: solid 3px red; }不幸的是，它并不存在。
有一些关于“为什么不是地狱”的文章。Shaun Inman的一个很好的补充是相当好的：
http://www.shauninman.com/archive/2008/05/05/css_qualified_selectors
Stack Overflow用户
发布于 2017-07-28 00:43:40
在@kp的回答之上：
我正在处理这个问题，在我的例子中，我必须显示子元素并相应地更正父对象的高度(由于某些原因，自动调整大小在引导标头中不起作用，我没有时间进行调试)。
但是，我不会使用javascript来修改父对象，而是动态地向父对象添加一个CSS类，并相应地有选择地显示子对象。这将维护逻辑中的决策，而不是基于CSS状态。
tl;dr;将a和b样式应用到父<div>，而不是子<div>(当然，不是每个人都能做到这一点。即，角度组件自己做出决定)。
<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>https://stackoverflow.com/questions/2326499
复制相似问题