根据元素的子元素将css样式应用于元素?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (10)

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

我知道我可以使用javascript实现这一点,但我只是想知道,使用一些未知的CSS特性是否可能做到这一点。

提问于
用户回答回答于

据我所知,基于子元素的父元素样式不是CSS的可用特性。为此你可能需要编写脚本。

如果你能做点什么div[div.a]div:containing[div.a]就像你说的,但这是不可能的。

你可以考虑看看jQuery。它的选择器很好地与“包含”类型。你可以根据div的子内容选择div,然后将CSS类应用到父类(全部位于一行中)。

如果使用jQuery,那么类似于jQuery的内容可能会有效(未经测试,但理论是存在的):

$('div:has(div.a)').css('border', '1px solid red');

$('div:has(div.a)').addClass('redBorder');

结合CSS类:

.redBorder
{
    border: 1px solid red;
}

用户回答回答于

基本上没有。以下内容在理论上是你想要的:

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

不幸的是它不存在。

扫码关注云+社区