是否可以为元素定义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来实现这一点,但我只是想知道是否可以使用一些(对我来说)未知的特性。
发布于 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的文档。
发布于 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
发布于 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
复制相似问题