代码之家 › 专栏 › 技术社区 › M4N

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

css html

157

M4N · 技术社区 · 15 年前

我认为最好用一个例子来解释这一点。

当前位置我正在努力 ,具体取决于它包含的子元素。

<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功能。

4 回复 | 直到 12 年前

132

Nisse Engström sting_roc 7 年前

据我所知,基于子元素设计父元素的样式不是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');

.redBorder
{
    border: 1px solid red;
}

这是这个项目的文档 jQuery "has" selector .

Nisse Engström sting_roc 7 年前

基本上没有。下面是将从理论上说,你追求的是什么:

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

不幸的是,它并不存在。

http://www.shauninman.com/archive/2008/05/05/css_qualified_selectors

Mauricio Morales 7 年前

在@kp的回答之上:

我正在处理这个问题,在我的例子中,我必须显示一个子元素并相应地更正父对象的高度(由于某些原因,我没有时间调试,自动调整大小在引导标头中不起作用)。

决定

tl;博士 应用 a 和 b <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>

miles 5 年前

在我的例子中,我必须更改元素的单元格填充,该元素包含正在使用DataTables动态呈现的表的输入复选框:

<td class="dt-center">
    <input class="a" name="constCheck" type="checkbox" checked="">
</td>

initComplete 函数I能够生成正确的填充,从而修复了行以异常大的高度显示的问题

 $('tbody td:has(input.a)').css('padding', '0px');

<td class=" dt-center" style="padding: 0px;">
    <input class="a" name="constCheck" type="checkbox" checked="">
</td>

从本质上讲,这个答案是@KP答案的扩展,但实现这个答案的合作越多越好。总之,我希望这对其他人有所帮助,因为它是有效的!最后,非常感谢@KP为我指引了正确的方向!