小编典典

根据子元素将CSS样式应用于元素

all

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


阅读 85

收藏
2022-06-07

共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” 选择器的文档。

2022-06-07